vue-cli4.x 使用 scss 全局变量设置使用

2021-01-08 02:28

阅读:554

标签:log   header   ase   变量   ref   方案   net   oat   解决方案   

目录
  • 本记录仅针对于 vue-cli4.x 使用 scss 全局变量设置使用
  • 确定依赖包
  • 相关配置
  • 使用

本记录仅针对于 vue-cli4.x 使用 scss 全局变量设置使用

在网上也找了很多版本的方法,尝试后都不可行。由于我使用的是 vue-cli4.x 脚手架搭建的项目,在网上也找到一个解决方案,特此记录。

确定依赖包

先在 package.json 文件中确定是否集成了 sass 相关的包 node-sasssass-loader. 若没集成,需要先进行相关安装。

npm install node-sass

npm install sass-loader

相关配置

在安装完相关依赖后,需要在 vue.config.js 中进行相关配置,重点配置路径。 路径后面的 ;是必须的

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "./src/assets/styles/base";`,
            },
        },
    },
}

使用

在需要使用全局样式的地方,就可以进行使用 base.scss 文件中定义的样式。但是得注意在 加 lang="scss"

logo.vue 文件中使用。

原文地址:http://book.levy.net.cn/doc/frontend/vue/vue_scss_set.html

vue-cli4.x 使用 scss 全局变量设置使用

标签:log   header   ase   变量   ref   方案   net   oat   解决方案   

原文地址:https://www.cnblogs.com/levywang/p/13532058.html


评论


亲,登录后才可以留言!