javascript - Webpack SCSS 到 CSS 提取不起作用

Question

我正在尝试使用 webpack 插件在我的 react.js 应用程序上将 SCSS 提取到 CSS:extract-text-webpack-plugin。我没有收到任何错误，但是编译时我在页面上看不到任何样式。在下面的代码中，我只是试图将屏幕上呈现的 hello world 的颜色从黑色更改为红色。这是我的文件:

webpack.config.js

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


module.exports = {
    devtool: 'inline-source-map',
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:8080/',
        'webpack/hot/only-dev-server',
        './src/index.js',
        './sass/styles.scss'
    ],
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    resolve: {
        modules: ['node_modules', 'src'],
        extensions: ['.js', '.jsx']
    },
   module: {
            rules: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: ['react-hot-loader', 'babel-loader']
        },

        { // regular css files
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
              loader: 'css-loader?importLoaders=1',
            }),
        },

        { // sass / scss loader for webpack
            test: /\.(sass|scss)$/,
            loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
        }

    ]
},

plugins: [
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin(),
     new ExtractTextPlugin("styles.css")
   ]
 };

样式.scss

$color : red;

.hello{
   font-color: $color;
   text-align: center;
}

app.js

import React from 'react';

export default class App extends React.Component {
    render() {
        return (
     <div>
        <h1 className = "hello">Hello World</h1>
      </div>);
    }
}

index.js

import React from 'react';
import { render } from 'react-dom';
import App from './components/app';

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

我错过了什么？

Answer 1

您的加载程序链中缺少 style-loader。

来自 sass-loader docs :

Chain the sass-loader with the css-loader and the style-loader to immediately apply all styles to the DOM.

// webpack.config.js
module.exports = {
    ...
    module: {
        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
            }]
        }]
    }
};