webpack - 将每个 scss 编译为具有相同名称的 css 文件

Question

我想要这样的结构

-Styles
    --Main.scss
    --SomeComponent.scss
-CompiledStyles
    --Main.css
    --SomeComponent.css

其实我只能这样做

-Styles
    --Main.scss
    --SomeComponent.scss
    --All.scss  (import all scss from file)
-CompiledStyles
    --Main.css ( all css)

这是我的 webpack 配置

var Path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS2 = new ExtractTextPlugin('[name].css');

 module.exports = {
    devtool: 'eval',
    entry: './Client/Styles/All.scss',
    output: {
        path: Path.join(__dirname, 'CompiledStyles'),
        filename: 'page.js',
        publicPath: '/CompiledStyles/'
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: extractCSS2.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader")
            },
            {
                //IMAGE LOADER
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: 'file-loader'
            },
            {
                test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                loader: 'file-loader?name=fonts/[name].[ext]'
            }
        ]
    },
    plugins: [
        extractCSS2
    ]
};

是否可以将此 scss 文件编译为单个 css 文件？ 我真的不知道如何处理这个案子。我尝试分配条目：'./Client/Styles'，但出现错误。

编辑：

我用 gulp 解决了这个问题。

Answer 1

webpack 的想法是将所有需要的东西放在一些 JavaScript 文件中。因此，我们不打算为每个 css 文件构建一个 css 文件。

如果你还想继续使用 webpack，请在你的 webpack 配置中试试这个：

module.exports = {
  // ...
  entry: {
    'Main':           './Client/Styles/Main.scss',
    'SomeComponents': './Client/Styles/SomeComponents.scss',
  },
  // ...
}

在adamo94注意到他使用gulp之后，我已经更新了答案，所以只为其他人提供更多信息。要转换 scss 文件，您需要一个 sass/scss 处理器。您可以通过一次调用轻松调用该处理器，但由于您通常对源执行更多操作，因此可能需要进行一些进一步的处理。
通常你会使用gulp 或grunt。这些可以配置为构建您需要的一切。它们各有优缺点，还有更多工具，但您可能想看看这些。