Webpack - 如何为sass loader配置基目录路径？

Question

我正在尝试遵循一些教程和文档,并将webpack构建为我的sass文件分成css文件.

这一切都有效,只要我在require中证明完全相对路径:

require("../sass/ss.scss")

但我想用它:

require("./ss.scss")

然后我在配置中将'sassLoader'注释掉,我收到错误:

[1] "sassLoader" is not allowed

正如您所看到的,我一直在尝试使用内联设置:

sourceMap&includePaths[]=' + (PATHS.sass)

但他们被忽略了.

我究竟做错了什么？

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const validate = require('webpack-validator');
const merge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const PATHS = {
  app: path.join(__dirname, 'app'),
  js: path.join(__dirname, 'app', 'js'),
  sass: path.join(__dirname, 'app', 'sass'),
  build: path.join(__dirname, 'build')
};

const common = {

  // Entry accepts a path or an object of entries.
  // We'll be using the latter form given it's
  // convenient with more complex configurations.
  entry: {
    app: path.join(PATHS.js, 'index.js')
  },
  output: {
    path: PATHS.build,
    filename: '[name].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack demo'
    }),
    new ExtractTextPlugin(
      '[name].css', {
        allChunks: true
      }
    ),
  ],
  devtool: "source-map",
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
          'style!css?sourceMap!sass?sourceMap&includePaths[]=' + (PATHS.sass)
        )
      }
    ]
  }
  // sassLoader: {
  //   includePaths: [PATHS.sass]
  // }
};


var config;

// Detect how npm is run and branch based on that
switch(process.env.npm_lifecycle_event) {
  case 'build':
    config = merge(common,
      {}
    );
    break;
  default:
    config = merge(common,
      {}
    );
}

module.exports = validate(config);

Answer 1

该错误来自webpack-validator因为它无法识别该sassLoader属性.您需要配置架构扩展:

const Joi = require('webpack-validator').Joi

const schemaExtension = Joi.object({
  sassLoader: Joi.any(),
})

module.exports = validate(config, {schemaExtension: schemaExtension})

Answer 2

需要 CSS 模块由css-loader，仅@import由 处理sass-loader。（除此之外，他们的行为存在重大差异，请确保您使用的是您需要的）。

为了从根目录进行请求，您需要在 webpack 配置文件中配置resolve.root。请参阅此处的答案：Resolving require paths with webpack