解决Vue在main.js全局引入scss文件，组件里使用scss变量报错问题 |
您所在的位置：网站首页 › vue3引入组件没有样式 › 解决Vue在main.js全局引入scss文件，组件里使用scss变量报错问题 |
解决Vue在main.js全局引入scss文件，组件里使用scss变量报错问题
|
报错： Syntax Error: SassError: Undefined variable.
我一开始的引入方式是这样的：
以为在main.js全局引入了就一劳永逸，写着常规css样式时还好好的，用到scss变量时就报错了。· 解决方法一 在需要用到的 .vue 文件里单独引用 variable.scss 变量文件，but达不到我们想要的“一劳永逸“效果 可能还会有奇奇怪怪的潜在问题，建议使用方法二。 · 解决方法二 配置vue.config.js文件，使得全局都能使用scss变量，而不用每个文件单独引入 我是按照vue官方的建议来的： https://cli.vuejs.org/zh/guide/css.html#css-modules 在 vue.config.js 文件的 module.exports 加上以下配置项： css: { loaderOptions: { // 给 sass-loader 传递选项 // sass: { // // @/ 是 src/ 的别名 // // 所以这里假设你有 `src/variables.sass` 这个文件 // // 注意：在 sass-loader v8 中，这个选项名是 "prependData" // additionalData: `@import "~@/stylesheet/index.scss"` // }, // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效 // 因为 `scss` 语法在内部也是由 sass-loader 处理的 // 但是在配置 `prependData` 选项的时候 // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号 // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置 scss: { prependData: `@import "~@/stylesheet/variable.scss";` }, // 给 less-loader 传递 Less.js 相关选项 // less:{ // // http://lesscss.org/usage/#less-options-strict-units `Global Variables` // // `primary` is global variables fields name // globalVars: { // primary: '#fff' // } // } } }因为我用的是 scss 预处理器，用其他插件的可以看使用说明，很详细。 重新 npm run dev 起一下项目，就可以在组件里使用自己定义的scss变量了 √ |
【本文地址】
今日新闻 |
推荐新闻 |