css - webpack sass-loader 不生成 css

Question

我不知道如何使用 webpack sass-loader 渲染 css。

App.js 文件:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Test from "./Test";

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
          <Test />
      </div>
    );
  }
}

export default App;

Test.jsx 文件:

import React, { Component } from 'react';
import './Test.scss';

class Test extends Component {
    render() {
        return (
            <p className="intro">
                Test
            </p>
        );
    }
}

export default Test;

测试.scss文件:

.intro{
  background-color: #dddddd;
  color: red;
}

webpack.config.dev.js 文件:

{
            test: /\.css$/,
            use: [
                require.resolve('style-loader'),
                {
                    loader: require.resolve('css-loader'),
                    options: {
                        importLoaders: 1,
                    },
                },
                {
                    loader: require.resolve('postcss-loader'),
                    options: {
                        ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
                        plugins: () => [
                            require('postcss-flexbugs-fixes'),
                            autoprefixer({
                                browsers: [
                                    '>1%',
                                    'last 4 versions',
                                    'Firefox ESR',
                                    'not ie < 9', // React doesn't support IE8 anyway
                                ],
                                flexbox: 'no-2009',
                            }),
                        ],
                    },
                },
            ],
        },
        {
            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
            }]
        }

图片:
结果

预期的

我在 sass 加载器上做错了什么。它是什么？请帮忙。

       {
            exclude: [
                /\.html$/,
                /\.(js|jsx)$/,
                /\.css$/,
                /\.scss$/,
                /\.json$/,
                /\.bmp$/,
                /\.gif$/,
                /\.jpe?g$/,
                /\.png$/,
            ],
            loader: require.resolve('file-loader'),
            options: {
                name: 'static/media/[name].[hash:8].[ext]',
            },
        }

我这里加了/.scss$/，代码运行成功，谢谢大家

Answer 1

这就是我在 extract-text-webpack-plugin 的帮助下使用 sass-loader 的方式创建一个单独的文件，而不是仅仅将其包含到 bundle.js 文件中。

我正在使用 webpack v2.6.1

//webpack-config.js

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

    module: {
            rules: [
              { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader']}) },
              { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader']}) },
            ],
          },
plugins: [
   new ExtractTextPlugin('[name]-[chunkhash].css'),
]

并将其导入我的 index.js，如下所示:

import '../public/assets/sass/style.scss';