vue-cli 3 全局引入scss变量

系统管理员 2023-02-14 06:47 20阅读 0赞

1、安装sass-resources-loader

npm install sass-resources-loader -S

2、在根路径下（package.json同级）新建vue.config.js（如果已经存在，则不用新建）

vue.config.js

module.exports = {
      chainWebpack: config => {
        const oneOfsMap = config.module.rule('scss').oneOfs.store
        oneOfsMap.forEach(item => {
          item
            .use('sass-resources-loader')
            .loader('sass-resources-loader')
            .options({
              // Provide path to the file with resources
              resources: './src/assets/mixins.scss',
    
              // Or array of paths
              // resources: ['./path/to/vars.scss', './path/to/mixins.scss']
            })
            .end()
        })
      }
    }

在src/assets目录下新建mixins.scss

$theme-color: #d1274e;
    
    @mixin border {
        border-radius: 3px;
        border: 1px solid #ededed;
    }

在页面中使用$theme-color

<style lang="scss" scoped>
        #nav {
            color: $theme-color;
        }
    </style>

npm run serve重启服务验证成功

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关 vuecli3.0全局引入jquery

之前使用jquery都是每个组件引入 import $ from 'jquery' 这种方式需要在每个要使用jquery的组件里面引入一下，比较麻烦，分享一下全局引

约定不等于承诺〃/ 2023年06月15日 09:53/ 0 赞/ 28 阅读

相关 vue-cli 3 全局引入scss变量

1、安装sass-resources-loader npm install sass-resources-loader -S 2、在根路径下（package.jso

系统管理员/ 2023年02月14日 06:47/ 0 赞/ 21 阅读

相关 vue项目全局中引入scss

一、概述有一个scss文件，需要应用到每一个vue文件。如果每一个vue文件写重复代码，浪费精力。关于scss的安装，请参考链接：[https://www.cnbl

朴灿烈づ我的快乐病毒、/ 2022年10月15日 11:52/ 0 赞/ 272 阅读

相关 vite 添加scss全局变量

首先要先安装一下npm安装一下sass，然后再vite.config中修改配置 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdG

待我称王封你为后i/ 2022年10月07日 01:58/ 0 赞/ 564 阅读

相关 vue——scss变量全局使用

vue——scss变量全局使用 1.终端安装sass-resources-loader npm install sass-resources-loader

爱被打了一巴掌/ 2022年10月04日 15:42/ 0 赞/ 309 阅读

相关 vue 配置sass、scss全局变量

下载vue项目下载vue项目就不多说了，大家既然搜索这个标题，肯定不差这一步依赖： 1.下载sass-resources-loader 执行npm/cnpm

旧城等待，/ 2022年03月07日 03:48/ 0 赞/ 377 阅读

相关 Vue-Cli 3 引入 SCSS 全局变量

首先创建一个全局变量文件 `global.scss` $theme-color: efefef; 复制代码编辑`vue.config.js`

以你之姓@/ 2022年01月19日 00:21/ 0 赞/ 707 阅读

相关 vue使用scss，并且全局引入公共scss样式

要如何在我们的vue项目中全局引入scss文件呢？ 1. `main.js`可以直接`import css`文件，而不可以直接`import scss`文件。 2. 在i

Myth丶恋晨/ 2022年01月17日 00:39/ 0 赞/ 805 阅读

相关 vue 全局使用scss 变量

1.安装scss npm install --save-dev sass-loader //sass-loader依赖于node-sass npm i

野性酷女/ 2022年01月12日 03:09/ 0 赞/ 1178 阅读

相关 vue引入全局过滤器，引入全局公共方法，引入全局变量

-------------------- 多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) ---------

川长思鸟来/ 2021年11月16日 17:38/ 0 赞/ 699 阅读