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"]
    }
}

Webpack-Sass加载器未编译Sass

1 个答案: