1

我正在使用 webpack 和 sass 编写一个 React 应用程序。现在我想尝试那些CSS 模块，但我遇到了一些麻烦。首先，据我了解，我不能使用 .scss 模块，这就是为什么我的想法是将 .scss 文件转换为 .css 文件（例如 link.scss -> link.css、main.scss -> 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
4

1 回答 1

0

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

它对您不起作用，因为您没有在 sass 加载程序定义中为 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（请参阅此内容以供参考）。

于 2016-10-03T10:28:55.883 回答