webpack sass-loader不會生成類選擇器樣式

Question

我正在使用scss進入我的反應應用程序。問題我得到的是當我爲常量選擇器如h1，h2，p，ul，li編寫css時，公認。但是當我爲類或ID選擇器編寫CSS時，樣式不適用。

工作情況

h1, h2 { 
    padding:0px; 
} 

不工作的情況下

.main { 
padding:10px; 
} 

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加載程序選項。也許這有幫助。 上面的配置按預期工作。