webpack的sass-loader未生成类选择器样式。

Question

我在我的React应用程序中使用scss。我遇到的问题是，当我为常量选择器（如h1、h2、p、ul、li）编写CSS时，它被接受了。但是当我为类或ID选择器编写CSS时，样式不会应用。

工作情况

h1, h2 {
  padding:0px;
}

无法工作的情况

.main {
 padding:10px;
}

- Sathya

---

请分享你的Webpack配置，如果可能的话，请提供有问题的React代码部分。 - Karen Grigoryan

你的加载器选项中是否设置了“模块”标志？ - larrydahooster

可能是React项目中CSS类选择器样式未应用的重复问题。 - Sebastian Patten

Answer 1

我有同样的问题。 我现在的webpack.config.js看起来像这样:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');


const config = {
    entry: './app/index.js',
    module: {
    rules: [
        {
            test: /(\.css|\.sass|\.scss)$/,
            exclude: /node_modules/,
            use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
                use: [
                    {
                        loader: "style-loader" // creates style nodes from JS strings
                    },
                    {
                        loader: 'css-loader' // translates CSS into CommonJS
                    },
                    {
                        loader : 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader : 'postcss-loader',
                        options: {
                            plugins: function () {
                                return [
                                    require("autoprefixer")
                                ];
                            }
                        }
                    }
                ]
            })),
        },
        {
            test: /\.(js)$/,
            exclude: /(node_modules|bower_components)/,
            use : ['babel-loader']
        }
    ]
},
devtool: 'source-map',
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/' // avoid requesting server route instead of client route when hitting refresh /Cannot GET /route
},
plugins : [
    new HtmlWebpackPlugin({
        template: 'app/index.html'
    }),
    new ExtractTextPlugin({ filename: 'css/style.css', disable: true, allChunks: true }), // this means dist/css/style.css
]

};


if(process.env.NODE_ENV === "production"){ // 'production ready'
    config.plugins.push(
      new webpack.DefinePlugin({
        'process.env' : {
            'NODE_ENV' : JSON.stringify(process.env.NODE_ENV)
        }
      }),
      new webpack.optimize.UglifyJsPlugin({ sourceMap: true, minimize: 
 true })
  )
 }

module.exports = config;

我之前有一个 fallbackLoader: 'style-loader' 属性，以及一些未使用的 css-loader 选项在 query 属性中。也许这可以帮助解决问题。 上面的配置按预期工作。

- iulial