在 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 中使用上传的图片?