如何在全局引入scss的变量声明

因为想要避免<style> 标签下使用相对路径单独引入scss文件, 在main.js中引入color.scss的文件

import 'assets/scss/color.scss';

但是在组件中的style标签下找不到$red定义。

<style lang="scss" scoped>

.login {
  background-color: $red;
}
</style>

我现在只能在style标签下引用系统目录的相对路径,但这个样会导致不同层级的vue文件的相对路径不统一

<style lang="scss" scoped>
@import '../assets/scss/color.scss';
.login {
  background-color: $red;
}
</style>

有人知道如何在全局引入scss的变量定义吗?

回答:

此方法仅用于Vue.js2.0及以上版本,假设你的全局变量和Mixin存储在src/assets/scss/color.scss里。

打开 build/utils.js 文件

scss: generateLoaders(['css', 'sass']),

替换为

 scss: generateLoaders(['css', 'sass?data=@import "~assets/scss/color";']),

重新运行 npm run dev 即可在Vue文件里使用全局变量了。

回答:

我找到一个完美解决的方法,是别人文章里给的,我试了,好用!贴上地址:https://segmentfault.com/a/11…

回答:

我有一个比较山寨的方案
因为~可以定位到 node_modules 文件夹
所以可以这样写 @import “~vue/../../src/assets/scss/color.scss”;
具体目录以你的项目结构为准

回答:

试试

@import "../assets/scss/color.scss";

回答:

import ‘~assets/scss/color.scss’

加“~”这个

回答:

https://segmentfault.com/a/11…
打开链接查看引入sass全局变量,mixin,function等部分

回答:

题主可以参考:
sass-resources-loader,适用于webpack1,2,3,vue-cli2、3等,官方 github 文档清晰明了。
https://github.com/shakacode/…

回答:

vue-cli@3中处理全局SASS/SCSS变量的方法(亲测可用):
2020年9月6日 12:01:24

# 主流的两种方法 :
  • 使用 sass-resources-loader
  • vue.config.js 中配置 sass-loader

    // vue.config.js
    
    module.exports = {
      // sass-loader
      // https://vue-loader.vuejs.org/zh/guide/pre-processors.html#sass
      css: {
        extract: false,
        sourceMap: true,
        loaderOptions: {
          sass: {
            // https://webpack.docschina.org/loaders/sass-loader/#options
            // https://webpack.docschina.org/loaders/sass-loader/
            // https://cli.vuejs.org/guide/css.html
            additionalData: '@import "~@/style/variables.scss";'
          }
        }
      },
    }
# 注意:
  • vue.config.js 中引入了 variables.scss 后,不要再在 main.js 中引入,否则报错SassError: An @import loop has been found:
# 参考:

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注