Question

我正在尝试编译一些sass文件并将每个文件提取到多个路径。

示例：

resources/home/a.scss -> public/home/a.css

resources/home/layout/b.scss -> public/home/layout/b.scss

resources/login/c.scss -> public/login/c.css

目前我正在使用此配置并捆绑每个scss文件：

const path = require("path")
const webpack = require("webpack")
const ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
// Context is an absolute path to the directory where webpack will be
// looking for our entry points.
context: path.resolve(process.cwd(), 'resources/assets'),

entry: 
     [
       './sass/app/home/a.scss',
       './sass/app/home/layout/b.scss',
       './sass/app/login/c.scss',
    ],
output: {
    path: __dirname,
    filename: '[name].js'
},
module: {
    rules: [
        {
            test: /\.(scss)$/,
            loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
        }

    ]
},
plugins: [
    new ExtractTextPlugin({ filename: '[name].css', allChunks: true })
    ]
}

Answer 1

我认为问题是您使用Array作为entry，这意味着所有依赖项（在这种情况下是不同的css文件，都被添加到同一个输出文件中）。

您应将其更改为：

entry: {
 a:  './sass/app/home/a.scss',
 b:  './sass/app/home/layout/b.scss',
 c:  './sass/app/login/c.scss'
}

您可以在此处阅读更多内容https://webpack.js.org/concepts/entry-points/#object-syntax

将多个css文件解压缩到不同的目录

1 个答案: