Question

我正在使用webpack和sass编写React应用程序。现在我想尝试那些CSS Modules，但我遇到了一些麻烦。首先，据我所知，我不能使用.scss模块，这就是为什么我的想法是将.scss文件转换为.css文件（例如link.scss - ＆gt; link.css，main。 scss - ＆gt; main.css等）然后将它们连接到React组件。但我不能让webpack将我的.scss文件拆分成单独的.css文件。我尝试了不同的配置，但是我一直得到main.css，它连接了所有的.scss文件。我想这对我来说不是最好的方式。

那么，你能帮助我获得一个正确的配置来将所有.scss文件拆分为.css。或者也许在我的应用程序中有另一种方法可以使用.scss模块。提前谢谢。

这是我的webpack配置

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    devtool: 'inline-source-map',
    entry: [
        'webpack-hot-middleware/client',
        './src/index.jsx'
    ],
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new ExtractTextPlugin("[name].[chunkhash].css", { allChunks: true })
    ],
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['react', 'es2015', 'react-hmre']
                }
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style-loader", "css!autoprefixer-loader?browsers=last 15 versions!sass")
            },
            {
                test: /\.css$/,
                loader: "style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]"
            }
        ]
    }
}

这是我在控制台中的输出：

Hash: d1d3f358c1680ba4f634
Version: webpack 1.13.1
Time: 4297ms
                        Asset       Size  Chunks             Chunk Names
                    bundle.js     2.5 MB       0  [emitted]  main
main.582da1db7866d6b8684d.css  373 bytes       0  [emitted]  main
   [0] multi main 40 bytes {0} [built]
    + 324 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules

Answer 1

可以将sass与css模块一起使用。

它不适合你，因为你没有在sass loader定义中为css加载器指定css modules参数。

以下是使用css模块配置sass的两种方法：

使用ExtractTextPlugin：

{
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('style', '!css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]&sourceMap!sass?sourceMap')
}

没有ExtractTextPlugin：

{
   test: /\.scss$/,
   loaders: ['style', 'css?modules&localIdentName=[name]__[local]___[hash:base64:5]&sourceMap', 'sass?sourceMap']
}

请注意，使用ExtractTextPlugin时，它将创建一个css文件。如果您需要多个css输出文件，可以多次定义ExtractTextPlugin（参见this以供参考）。

Webpack将scss拆分为单独的css文件

1 个答案: