在 Vue.js 中使用 vue.config.js 修复 sass-loader 错误

Question

我正在尝试在我的 Vue.js 应用程序中使用外部 sass 文件 (About.sass)，该应用程序是从 Vue CLI 3 生成的。但是我收到了关于 'Unknown word' 编译时。

经过大量研究，我的应用程序使用 'webpack-chain'，我使用 'vue.config.js' 配置 sass-loader。

我的配置时间线：

Vue CLI 3 - 默认预设
添加了<style src="../sass/About.sass" scoped></style>
yarn 添加 sass-loader node-sass style-loader
已将加载器添加到 vue.config.js

vue.config.js

module.exports = {
    chainWebpack: config => {
      config.module
        .rule('sass')
        .test(/\.sass$/)
        .use('sass-loader')
          .loader('sass-loader')
          .loader('css-loader')
          .loader('style-loader')
        .end()
    }
}

我真的被阻止了，无法让它工作。我收到此错误：

 ERROR  Failed to compile with 1 errors                                                                        22:02:03

 error  in ./src/sass/About.sass?vue&type=style&index=0&id=c226fde6&scoped=true&lang=css&

Syntax Error: SyntaxError

(2:1) Unknown word

  1 |
> 2 | var content = require("!!../../node_modules/vue-style-loader/index.js??ref--9-oneOf-1-0!../../node_modules/css-loader/index.js??ref--9-oneOf-1-1!../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-3!./About.sass?vue&type=style&index=0&id=c226fde6&scoped=true&lang=css&");
    | ^
  3 |
  4 | if(typeof content === 'string') content = [[module.id, content, '']];

有什么帮助或建议吗？提前致谢。

Answer 1

我好像忘记在标签 <style src="../sass/About.sass" scoped></style>

中指定类型 lang="sass"

Vue 足够智能来配置加载程序，因此甚至不需要 'vue.config.js'。

在 Vue.js 中使用 vue.config.js 修复 sass-loader 错误

Fix sass-loader error with vue.config.js in Vue.js

sass

vue-cli-3

sass-loader