scss 编译报错:Module build failed:Unknown word

首先,请确认错误不是由语法错误造成的。

在排除语法错误后,这一问题产生的原因很有可能是 webpackloader 顺序设置错误。

解决方案

首先要确认下面的扩展有没有安装好

npm i sass-loader node-sass postcss-loader style-loader autoprefixer -D

css loader 的配置

生产环境

{
   test: /\.css$/,
   use: ExtractTextWebpackPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'postcss-loader', 'sass-loader']
   })
 }

开发环境

{
   test: /\.css$/,
   use: ['style-loader', 'css-loader', 'postcss-loader']
}

scss loader 的配置

生产环境

{
  test: /\.scss$/,
  use: ExtractTextWebpackPlugin.extract({
   fallback: 'style-loader',
   use: ['css-loader', 'postcss-loader', 'sass-loader']
  })
}

开发环境

{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
}

其中,loader 的加载顺序是从右往左,比如要加载 scss 文件,所以要把 sass-loader 放在最后。

你可能感兴趣的:(webpack,Bug解决)