Question

我正在尝试使用webpack插件react.js在我的extract-text-webpack-plugin应用上将SCSS提取到CSS。我没有收到任何错误，但在编译时我无法在页面上看到任何样式。在下面的代码中，我只是试图将屏幕上呈现的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")
   ]
 };

styles.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的

：

使用css-loader和style-loader链接sass-loader，立即将所有样式应用于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
            }]
        }]
    }
};

Answer 2

您需要在代码index.js中导入styles.scss

import 'yourlink/styles.scss'

Webpack SCSS到CSS提取不起作用

2 个答案: