代码之家 › 专栏 › 技术社区 › Runtime Terror

从scss创建css,然后移动到特定的文件夹,但不要包含在头中

webpack

Runtime Terror · 技术社区 · 6 年前

angular 6 应用程序,使用 webpack 4 (我没有使用 ng cli )有这样的结构:

myNgApp/
âââ config/
â   âââ webpack.common.js
â   âââ webpack.dev.js
â   âââ webpack.prod.js
|   âââ // other webpack related scripts
âââ src/
    ââ app/
       ââ themes/
       |    âââ dark.theme.scss
       |    âââ blue.theme.scss
       ââ components/
       ââ app.component.scss
       ââ app.component.html
       ââ app.component.ts
       ââ app.module.ts

 ... // More files

创建单独的css文件[ app.css , vendor.css , dark.theme.css blue.theme.css ]
移动2个主css文件( 应用程序.css , )到文件夹 dist/css 并将其纳入 head 我的申请标签
移动主题文件( , dist/css/themes ,但不要将它们包含到我的应用程序中 头 标签(我想通过我的应用程序管理主题)

myNgApp/
âââ dist/
â   âââ css/
â   â    âââ themes/
â   â    â    âââ dark.theme.css
â   â    â    âââ blue.theme.css
â   â    â
â   â    ââ app.css    
|   |    ââ vendor.css
â   â
â   âââ // other files    
â
âââ config.sh
âââ install.bat
 ... // More files

我的电流 webpack.common.js :

module.exports = {
entry: {
    "polyfills": "./src/polyfills.ts",
    "vendor": "./src/vendor.ts",
    "app": "./src/main.ts"
},

resolve: {
    extensions: [".ts", ".js"]
},

module: {
    rules: [
        {
            test: /\.(css|scss)$/,
            include: [
                path.resolve(__dirname, "./src/app/themes")
            ],
            use: [
                {
                    loader: "css-loader",
                    options: {
                        sourceMap: true
                    }
                }
            ]

        },
        {
            test: /\.(css|scss)$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                },
                {
                    loader: "css-loader",
                    options: {
                        sourceMap: true
                    }
                },
                {
                    loader: "sass-loader",
                    options: {
                        sourceMap: true,
                        includePaths: [
                            path.resolve(__dirname, "../src/app/")
                        ]
                    }
                }
            ]
        }
    ]
},

plugins: [
]
};

1 回复 | 直到 6 年前

Ari 6 年前

可以根据输出路径将entry键设置为输出目标。所以你需要一个 output ...

output: {
  path: path.join(__dirname, "dist"),
  filename: "[name].js"
}

现在你的 entry: {"app": "./src/main.ts"} 将去dist; dist/app.js

where the file should go based on dist: where the file is now . 记住你会得到一个额外的 js 每个文件 scss 文件,但您可以删除/忽略它们。

entry: {
    "polyfills": "./src/polyfills.ts",
    "vendor": "./src/vendor.ts",
    "app": "./src/main.ts",
    "./css": "path-to-app.scss",
    "./css": "path-to-vendor.scss",
    "./css/themes: "path-to-blue.theme.scss",
    "./css/themes: "path-to-dark.theme.scss",
}

    {
        test: /\.s?css$/,
        use: [
            loader: MiniCssExtractPlugin.loader,
            {
                loader: "css-loader",
                options: { sourceMap: true }
            },
            {
                loader: "sass-loader",
                options: { sourceMap: true }
            }
        ]
    }