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文件？我真的不知道如何管理这个案子。我试图分配条目：＆＃39; ./客户/样式＆＃39;但它发生了错误。

编辑：

我用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。这些可以配置为构建您需要的一切。它们有不同的优点和缺点，还有其他工具，但那些可能是你想看的那些。

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

1 个答案: