Wie SCSS mit CSS-Module verwenden/postcss innerhalb Komponenten

Question

ich versagen, um herauszufinden, wie mein webpack, um Setup zu können, und SCSS Module in meinen Komponenten wie verwenden:

import styles from './ComponentStyles.scss'

So weit habe ich versucht, webpack Konfiguration sass-loader neben postcss-loader zu verwenden, aber hatte kein Glück:

{ 
    test: /\.scss$/, 
    loaders: [ 
     'isomorphic-style-loader', 
     'css-loader?modules&localIdentName=[name]_[local]_[hash:base64:3]', 
     'postcss-loader', 
     'scss-loader' 
    ] 
    } 

Hinweis isomorphic-style-loader ist eine Bibliothek, die ich anstelle von style-loader verwenden aufgrund von Server renderin g Anforderungen, in seiner github Seite docs verwenden sie eigentlich postcss-loader mit .scss Erweiterung, aber in meinem Fall scss ist nicht kompiliert, wenn ich ihrem Beispiel folge.

Answer 1

Ich hatte einige Bastelei selbst zu tun, aber schließlich landete auf dem folgenden

package.json

"autoprefixer": "^6.3.1", 
"css-loader": "^0.23.1", 
"extract-text-webpack-plugin": "^1.0.1", 
"node-sass": "^3.8.0", 
"sass-loader": "^3.1.2", 
"style-loader": "^0.13.0" 

webpack Config

... 
const autoprefixer = require('autoprefixer'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const autoprefixer = require('autoprefixer'); 
... 

const config = { 
    ... 
    postcss: [ 
     autoprefixer({ 
      browsers: ['last 2 versions'] 
     }) 
    ], 
    plugins: [ 
     new ExtractTextPlugin('css/bundle.css'), 
    ], 
    module: { 
     loaders: [ 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract('style', 'css!postcss!sass') 
      } 
     ] 
    } 
    ... 
}; 

bootstrap.jsx

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './app'; 
import style from './scss/style.scss'; 

ReactDOM.render(
    <App/>, 
    document.getElementById('my-app') 
); 

Für Interessenten: Was hier geschieht, ist bootstrap.jsx der webpack Eintrittspunkt ist, und durch unsere rohe scss-Datei importiert (über relativen Pfad), sagen wir webpack es während des Build-Prozesses einzubeziehen.

Auch, weil wir eine loader für diese Dateierweiterung in unserer Konfiguration (.scss) angegeben haben, ist webpack Lage style.scss zu analysieren und durch die definierten Lader von rechts nach links laufen: sass --> post-css --> css.

Wir verwenden dann extract-text-webpack-plugin, um das kompilierte CSS aus bundle.js, wo es normalerweise liegen würde, zu ziehen und es an einem Speicherort (css/bundle.css) relativ zu unserem Ausgabeverzeichnis zu platzieren. Die Verwendung von ist hier optional, da es einfach Ihr CSS aus bundle.js extrahiert und es in einer separaten Datei plopst, was nett ist, wenn Sie das serverseitige Rendering verwenden, aber ich fand es auch während des Debuggens hilfreich , da ich einen spezifischen Ausgabeplatz für die scss hatte, war ich am Kompilieren interessiert.

Wenn Sie schauen, um dies in Aktion zu sehen, hier ist ein kleines Beispiel, das es verwendet: https://github.com/mikechabot/react-boilerplate