webpack sass-loader nicht Klassenselektoren Stile erzeugen

Question

Ich benutze scss in meine Anwendung zu reagieren.Das Problem, was ich bekomme, ist, wenn ich CSS für konstante Selektoren wie H1, H2, P, UL, Li, seine bekommen schreiben akzeptiert. Aber wenn ich CSS für Klassen- oder ID-Selektoren schreibe, gelten die Stile nicht.

Arbeits Fall

h1, h2 { 
    padding:0px; 
} 

Nicht Fall arbeiten

.main { 
padding:10px; 
} 

Answer 1

hatte ich das gleiche Problem. Meine webpack.config.js sieht wie folgt nun:

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; 

Ich hatte eine fallbackLoader: 'style-loader' Eigenschaft vor und einige nicht verwendete CSS-Loader-Optionen in einer Abfrage-Eigenschaft. Vielleicht hilft das. Die obige Konfiguration funktioniert wie erwartet.