javascript - 如何将sass添加到webpack+react中？

Question

如何在配置 webpack + React 中正确添加 sass(in jsx import 'style.sass')？

var path = require('path');

var BUILD_DIR = path.resolve(__dirname, './');
var APP_DIR = path.resolve(__dirname, 'src/');

var config = {
    entry: APP_DIR + '/index.jsx',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: BUILD_DIR
    },
    module: {
        loaders: [
            {
                test: /\.jsx?/,
                include: APP_DIR,
                loader: 'babel-loader'
            }
        ]
        ,
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]
        }]
    }
};

module.exports = config;

错误:

ERROR in ./src/index.jsx Module parse failed: C:\Users\steko\Desktop\TEST\m-react\src\index.jsx Unexpected token (9:8) You may need an appropriate loader to handle this file type. | render () { | return ( | | Hello React Project!!! |

git

Answer 1

在 webpack 的模块部分执行此操作

module: {
    rules: [
        {
            test: /\.jsx?/,
            loader: 'babel-loader',
            include: APP_DIR
        },
        {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader!sass-loader",
            })
        }
    ]
}

然后在 webpack 代码的插件区域中执行此操作

plugins: [
    new ExtractTextPlugin('style.css'),
]

您将需要这个包extract-text-webpack-plugin

如果您仍有任何问题，请告诉我。