webpack sass-loader 不生成类选择器样式

Posted 2023-02-22

【中文标题】webpack sass-loader 不生成类选择器样式

【英文标题】：webpack sass-loader not generate class selectors styles

【发布时间】：2017-11-07 06:23:58

【问题描述】：

我在我的反应应用程序中使用 scss。我遇到的问题是，当我为 h1、h2、p、ul、li 等常量选择器编写 css 时，它被接受了。但是当我为类或 id 选择器编写 css 时，样式不适用。

工作案例

h1, h2 
  padding:0px;

无效的情况

.main 
 padding:10px;

【问题讨论】：

请分享你的 webpack 配置和有问题的部分反应代码（如果可能的话）

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

CSS class selector styles not being applied in React Project的可能重复

【参考方案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 选项。也许这有帮助。 上面的配置按预期工作。