Webpack - Sass 加载器不编译 Sass

Question

我正在尝试将Sass-loader 引入现有项目，以便能够在我的 React 组件中使用 Sass。我之前在我自己的样板中成功设置了这个并且没有任何问题，但由于某种原因，当前配置似乎无法播放。它不会给出任何错误，而是不会对我尝试导入的 .scss 文件执行任何操作。

我可以看到 cssLoaders Webpack 配置中有一些加载程序可能是罪魁祸首，但我只针对具有规则的 .scss/ .sass 文件

test: /\.s(a|c)ss$/

所以我根本不会想到这会影响它。

我有一个带有通用文件和一个用于开发的 webpack 设置。以下是这两个文件：

webpack.common.js

const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
require('babel-polyfill');

const Dotenv = require('dotenv-webpack');

module.exports = {
  entry: {
    main: ['babel-polyfill', './src/index.js']
  },
  output: {
    filename: '[name].[hash].js',
    path: path.resolve('./dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: ['node_modules'],
        use: [{ loader: 'babel-loader' }]
      },
      {
        test: /\.s(a|c)ss$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              outputPath: 'images/'
            }
          }
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|otf)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new ErrorOverlayPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebPackPlugin({
      template: 'index.html'
    }),
    new Dotenv(),
    new CleanWebpackPlugin(['dist'])
  ]
};

这里是 webpack.dev.js

const path = require('path');
const webpack = require('webpack');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');

const paths = require('../paths');

module.exports = require('./webpack.config.base')({
  bail: false,
  devtool: 'cheap-module-eval-source-map',
  stats: 'errors-only',
  performance: {
    hints: false
  },
  entry: {
    main: [
      require.resolve('react-dev-utils/webpackHotDevClient'),
      paths.appPolyfillsJs,
      require.resolve('react-error-overlay'),
      paths.appIndexJs
    ]
  },
  output: {
    pathinfo: true,
    filename: 'static/js/[name].js',
    chunkFilename: 'static/js/[name].chunk.js',
    devtoolModuleFilenameTemplate: info =>
      path.resolve(info.absoluteResourcePath)
  },

  // Load the CSS in a style tag in development
  cssLoaders: [
    {
      loader: require.resolve('style-loader'),
      options: {
        sourceMap: true
      }
    },
    {
      loader: require.resolve('css-loader'),
      options: {
        modules: false,
        sourceMap: true,
        importLoaders: 1
      }
    },
    {
      loader: require.resolve('postcss-loader'),
      options: { sourceMap: true }
    }
  ],
  babelQuery: {
    cacheDirectory: true
  },
  plugins: [].concat([
    new ProgressBarPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new CircularDependencyPlugin({
      exclude: /a\.js|node_modules/, 
      failOnError: true 
    })
  ])
});

我添加到配置中的部分在 webpack.common 中：

      {
        test: /\.s(a|c)ss$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      },

然后我将它导入到模块中，如下所示：

import React, { PureComponent } from 'react';
import './test.scss';
...

谁能找出配置错误的原因？

Answer 1

sass-loader 需要 node-sass 和 webpack 作为 peerDependency。

确保已安装 node-sass 并编辑加载程序 webpack.dev.js，如下所示：

{
    loader: "sass-loader",
    options: {
        includePaths: ["absolute/path/a", "absolute/path/b"]
    }
}