Webpack 不加载 scss 文件

Question

我已经将我的项目升级到 webpack 3。现在我的 scss 文件没有被加载。早些时候，当我使用 webpack 1 时，它确实加载了。但现在我正在关注文档并尝试了许多不同的东西。但仍然无法加载 SCSS 文件。任何建议我做错了什么或如何加载 scss 文件。 style.scss 直接在 /src 下。

以下是我的 webpack 配置和 package.json。

var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require('path');
var APP_DIR = path.resolve(__dirname, './src');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './public/js'),
        filename: 'my-first-webpack.bundle.js'
    },
    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
                }
                ]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader'

                }

            },
            {
                test: /\.(png|svg|jpg|webp)$/,
                use: {
                    loader: 'file-loader',
                },
            }
        ]
    }
}

• 包.JSON

  { "name": "basavasamiti", "version": "0.1.0", "private": true, "dependencies": { "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.7", "file-loader": "^0.11.2", "path": "^0.12.7", "react": "^15.6.1", "react-bootstrap": "^0.31.0", "react-bootstrap-carousel": "^1.2.0", "react-dom": "^15.6.1", "react-router-bootstrap": "^0.24.2", "react-router-dom": "^4.1.2", "react-scripts": "1.0.11", "react-svg-loader": "^1.1.1", "style-loader": "^0.18.2", "svg-loader": "0.0.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, "devDependencies": { "node-sass": "^4.5.3", "sass-loader": "^6.0.6", "webpack": "^3.6.0" } }

对 Webpack 配置进行更改后现在看起来像这样，但我收到错误 extract-text-webpack-plugin loader is used without相应插件。但是我已经安装了。我的 package.json 显示了这个插件的一个条目。不知道为什么会出现这个错误。

`

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CopyAssets = require('copy-webpack-plugin');
const WriteFiles = require('write-file-webpack-plugin');

var isProd = process.env.NODE_ENV === 'production'; // true or false

var prod = '../index.js';
var dev = 'index.js';
var outputFile = isProd ? prod : dev;

module.exports = {

    entry: {
        app: path.resolve(__dirname, 'src/') + '/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'public/'),
        filename: 'js/index.js'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    //resolve-url-loader may be chained before sass-loader if necessary
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test: /\.js$/,
                exclude: path.resolve(__dirname, 'node_modules'),
                use: 'babel-loader'
            },
            {
                test: /\.(pug|html)$/,
                use: ['raw-loader', 'pug-html-loader']
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: 'file-loader'
            }

        ]
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        compress: true,
        port: 8001,
        stats: 'errors-only',
        open: true,
        host: '0.0.0.0',
        disableHostCheck: true
    },
    plugins: [
        new WriteFiles(),
        new HtmlWebpackPlugin(
            {
                filename: outputFile,
                template: 'src/index.js',
                inject: true
            }
        ),
        new CopyAssets([
            {
                from: 'src/images',
                to: 'img'
            }
        ]),

        new ExtractTextPlugin(
            {
                filename: '[name]-[chunkhash].css',
                disable: false,
                allChunks: true
            }
        )
    ]

};

Answer 1

尝试使用这个：

{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader']
}

我目前也在做一个 Webpack 3 项目。也许你会看看我的webpack.config.js。它与 Sass 配合得很好。

Answer 2

首先，升级时你需要确保你也升级了所有的加载器。我们最终得到了这听起来与您的情况相似的情况。我也很难找到答案。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader']
        })
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'url-loader', 'sass-loader']
        })
      }
    ]
  }
}

我们发现此链接非常有帮助：

https://github.com/webpack-contrib/extract-text-webpack-plugin