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

Posted

技术标签:

【中文标题】在 Vue.js 中使用 vue.config.js 修复 sass-loader 错误【英文标题】:Fix sass-loader error with vue.config.js in Vue.js 【发布时间】:2019-08-14 11:28:17 【问题描述】:

我正在尝试在从 Vue CLI 3 生成的 Vue.js 应用程序中使用外部 sass 文件 (About.sass)。但是当它编译时我收到一个关于“未知单词”的错误。

经过大量研究,我的应用程序使用“webpack-chain”,并使用“vue.config.js”来配置 sass-loader。

我的配置时间线:

    Vue CLI 3 - 默认预设 已添加<style src="../sass/About.sass" scoped></style> yarn add 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, '']];

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

【问题讨论】:

【参考方案1】:

我好像忘记在标签<style src="../sass/About.sass" scoped></style>中指定类型lang="sass"

Vue 足够聪明,可以配置加载器,因此甚至不需要“vue.config.js”。

【讨论】:

以上是关于在 Vue.js 中使用 vue.config.js 修复 sass-loader 错误的主要内容,如果未能解决你的问题,请参考以下文章

qianKun + VUE 实现微前端架构 (基于vue2实现)

Vue.JS - 如何在 Vue.JS 中使用 localStorage

Node.js 和 Vue.js,为啥 Refresh 让 vue.js 的 store 清晰?我如何在 vue.js 中使用上传的图片?

vue-cli3的本地代理配置

vue-cli3的本地代理配置

如何在 Vue.js 3 中使用 Vue 3 Meta?