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

红太狼 2022-05-11 01:54 505阅读 0赞

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

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

解决方案

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

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

css loader 的配置

生产环境

  1. { 
  2.    test: /\.css$/,
  3.    use: ExtractTextWebpackPlugin.extract({ 
  4.     fallback: 'style-loader',
  5.     use: ['css-loader', 'postcss-loader', 'sass-loader']
  6.    })
  7.  }

开发环境

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

scss loader 的配置

生产环境

  1. { 
  2.   test: /\.scss$/,
  3.   use: ExtractTextWebpackPlugin.extract({ 
  4.    fallback: 'style-loader',
  5.    use: ['css-loader', 'postcss-loader', 'sass-loader']
  6.   })
  7. }

开发环境

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

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

发表评论

表情：
评论列表 （有 0 条评论，505人围观）

还没有评论，来说两句吧...

相关阅读