合併反應樣板文件和SASS文件

Question

在反應樣板文件的頂部，我正在嘗試使用已經存在的SASS文件。我知道styled-components approach應該是首選，我真的很喜歡它，但重新編寫完整的現有SASS的東西目前不是一種選擇（但我會嘗試在未來一步一步地做到這一點）。

儘管如此，由於this readme file within react-boilerplate，它應該不那麼辛苦（至少我雖然這樣）。所以我更新了我的webpack配置並添加了npm包sass-loader和node-sass。然後我我的組件文件夾中創建一個文件index.scss

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

和我index.js這個非常簡單的代碼中：

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> 
    ); 
    } 
} 

但它是行不通的。

如果我在運行時使用chrome開發人員工具檢查DOM，我可以看到給定的<div>沒有任何屬性，並且styles對象爲空。

那麼我應該如何將.scss SASS文件中的樣式應用到我的組件內的節點上呢？

webpack.base.babel.js

/** * 常見的WebPack配置 */

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

爲SCSS添加裝載機在你的WebPack配置文件（webpack.base.baebl .js文件）。代碼將如下所示：

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, ... 

這樣做就可以了。