Question

我正在使用最新版本的webpack和extract-text-webpack-plugin。我正在尝试按照Export Sass or LESS的说明进行操作。我一整天都在阅读问题和答案，但仍然没有发现任何有用的东西。我不明白我错过了什么。是否无法传入选项来为sass-loader设置includePaths？这是我目前在webpack.config.js中的尝试：

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
  entry: ['./src/index.js', './src/scss/main.scss'],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: './dist'
  },
  module: {
    rules: [
      { // scss loader for webpack
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              use: 'css-loader'
            },
            {
              use: 'sass-loader',
              options: {
                includePaths: [
                  path.resolve(__dirname, 'src/scss'),
                  path.resolve(__dirname, "node_modules/foundation-sites/scss")
                ]
              }
            }
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({ // define where to save the file
      filename: 'styles.css',
      allChunks: true,
    })
  ],
}

构建时，我收到以下错误：

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[0].use should be one of these:
   non-empty string | function | object { loader?, options?, query? } | function | [non-empty string | function | object { loader?, options?, query? }]
   Details:
    * configuration.module.rules[0].use should be a string.
    * configuration.module.rules[0].use should be an instance of function.
    * configuration.module.rules[0].use should be an object.
    * configuration.module.rules[0].use should be one of these:
      non-empty string | function | object { loader?, options?, query? }
    * configuration.module.rules[0].use should be an instance of function.
    * configuration.module.rules[0].use[2] should be a string.
    * configuration.module.rules[0].use[2] should be an instance of function.
    * configuration.module.rules[0].use[2] has an unknown property 'use'. These properties are valid:
      object { loader?, options?, query? }
    * configuration.module.rules[0].use[2] should be one of these:
      non-empty string | function | object { loader?, options?, query? }
    * configuration.module.rules[0].use[3] should be a string.
    * configuration.module.rules[0].use[3] should be an instance of function.
    * configuration.module.rules[0].use[3] has an unknown property 'use'. These properties are valid:
      object { loader?, options?, query? }
    * configuration.module.rules[0].use[3] should be one of these:
      non-empty string | function | object { loader?, options?, query? }

在这一点上，我已经尝试了10种不同的方式，但是我无法让它发挥作用。我很困惑这是否是某种错误，或者我是否做错了什么。有人可以帮忙吗？我只想为sass-loader设置includePaths。

Answer 1

这有效，我不知道为什么。得到了关于github的答案：

https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/657#issuecomment-340889167

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
  entry: ['./src/index.js', './src/scss/main.scss'],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: './dist'
  },
  module: {
    rules: [
      { // scss loader for webpack
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader'
            },
            {
              loader: 'sass-loader',
              options: {
                includePaths: [
                  path.resolve(__dirname, 'src/scss'),
                  path.resolve(__dirname, "node_modules/foundation-sites/scss")
                ]
              }
            }
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({ // define where to save the file
      filename: 'styles.css',
      allChunks: true,
    })
  ],
}

使用ExtractTextPlugin和sass-loader

1 个答案: