Question

我试图遵循一些教程和文档，并将webpack构建为我的sass文件分成css文件。

这一切都有效，只要我在需要时证明完全相对路径：

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

但我想用它：

require("./ss.scss")

我将注释掉了＃sassLoader＆＃39;在配置中，我收到错误：

[1] "sassLoader" is not allowed

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

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

但他们被忽略了。

我做错了什么？

＆＃13;

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);

＆＃13;

Answer 1

错误来自webpack-validator，因为它无法识别sassLoader属性。您需要配置schema extension：

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

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

2 个答案: