Kombiniere react-boilerplate und SASS file

Question

Oben auf react-bleeplate versuche ich gerade eine bereits existierende SASS-Datei zu verwenden. Ich bin mir der styled-components approach bewusst, die bevorzugt werden sollte, und ich mag sie wirklich, aber es ist derzeit keine Option, das komplette vorhandene SASS-Material neu zu schreiben (aber ich werde versuchen, dies Schritt für Schritt in der Zukunft zu tun).

Trotzdem, wegen this readme file within react-boilerplate sollte es nicht so schwer sein (zumindest ich das). Also habe ich meine Webpack-Konfiguration aktualisiert und die npm-Pakete und node-sass hinzugefügt. Dann habe ich in meiner Komponente Ordner eine Datei index.scss

.messageBody { 
    color: magenta; 
    background-color: goldenrod; 
} 

und in meinen index.js dieser sehr einfachen Code:

import React from 'react'; 
import styles from './index.scss'; 

class MyComponent extends React.PureComponent { 
    render() { 
    return (
     <div> 
     <div className={styles.messageBody}>{ this.props.message }</div> 
     </div> 
    ); 
    } 
} 

Aber es funktioniert einfach nicht.

Wenn ich das DOM zur Laufzeit mithilfe der Chrome-Entwickler-Tools überprüfen, kann ich sehen, dass die angegebene <div> keine Attribute hat und dass das styles Objekt leer ist.

Also was soll ich tun, um den Stil aus der .scss SASS-Datei auf meine Knoten innerhalb meiner Komponente anzuwenden?

webpack.base.babel.js

/** * COMMON WebPACK CONFIGURATION */

const path = require('path'); 
const webpack = require('webpack'); 

module.exports = (options) => ({ 
    entry: options.entry, 
    output: Object.assign({ // Compile into js/build.js 
    path: path.resolve(process.cwd(), 'build'), 
    publicPath: '/', 
    }, options.output), // Merge with env dependent settings 
    module: { 
    loaders: [{ 
     test: /\.js$/, // Transform all .js files required somewhere with Babel 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: options.babelQuery, 
    }, { 
     // Do not transform vendor's CSS with CSS-modules 
     // The point is that they remain in global scope. 
     // Since we require these CSS files in our JS or CSS files, 
     // they will be a part of our compilation either way. 
     // So, no need for ExtractTextPlugin here. 
     test: /\.css$/, 
     include: /node_modules/, 
     loaders: ['style-loader', 'css-loader'], 
    }, { 
     test: /\.(eot|svg|ttf|woff|woff2)$/, 
     loader: 'file-loader', 
    }, { 
// ------- Added entry for .scss files 
     test: /\.scss$/, 
     exclude: /node_modules/, 
     loaders: ['style-loader', 'css-loader', 'sass-loader'], 
    }, { 
// ------- End of added entry for .scss files 
     test: /\.(jpg|png|gif)$/, 
     loaders: [ 
     'file-loader', 
     { 
      loader: 'image-webpack-loader', 
      query: { 
      progressive: true, 
      optimizationLevel: 7, 
      interlaced: false, 
      pngquant: { 
       quality: '65-90', 
       speed: 4, 
      }, 
      }, 
     }, 
     ], 
    }, { 
     test: /\.html$/, 
     loader: 'html-loader', 
    }, { 
     test: /\.json$/, 
     loader: 'json-loader', 
    }, { 
     test: /\.(mp4|webm)$/, 
     loader: 'url-loader', 
     query: { 
     limit: 10000, 
     }, 
    }], 
    }, 
    plugins: options.plugins.concat([ 
    new webpack.ProvidePlugin({ 
     // make fetch available 
     fetch: 'exports-loader?self.fetch!whatwg-fetch', 
    }), 

    // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV` 
    // inside your code for any environment checks; UglifyJS will automatically 
    // drop any unreachable code. 
    new webpack.DefinePlugin({ 
     'process.env': { 
     NODE_ENV: JSON.stringify(process.env.NODE_ENV), 
     }, 
    }), 
    new webpack.NamedModulesPlugin(), 
    ]), 
    resolve: { 
    modules: ['app', 'node_modules'], 
    extensions: [ 
     '.js', 
     '.jsx', 
     '.react.js', 
    ], 
    mainFields: [ 
     'browser', 
     'jsnext:main', 
     'main', 
    ], 
    }, 
    devtool: options.devtool, 
    target: 'web', // Make web variables accessible to webpack, e.g. window 
    performance: options.performance || {}, 
}); 

Answer 1

Lader hinzufügen für SCSS in Ihrer webpack Konfigurationsdatei (webpack.base.baebl .js). Der Code wird wie folgt aussehen:

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

const extractSass = new ExtractTextPlugin({ 
    filename: '[name].[contenthash].css', 
    disable: process.env.NODE_ENV === 'development', 
}); 

// loader 
{ 
    test: /\.scss$/, 
    exclude: /node_modules/, 
    loader: extractSass.extract({ 
    use: [{ 
     loader: 'css-loader', 
    }, { 
     loader: 'sass-loader', 
    }, { 
     loader: 'sass-loader?sourceMap', 
    }], 
    // use style-loader in development 
    fallback: 'style-loader', 
    }), 
} 

//plugin concat 
plugins: options.plugins.concat([ 
new webpack.ProvidePlugin({ 
    // make fetch available 
    fetch: 'exports-loader?self.fetch!whatwg-fetch', 
}), 
extractSass, ... 

Dies wird den Trick tun.