vue 配置sass、scss全局变量

旧城等待， 2022-03-07 03:48 348阅读 0赞

**下载vue项目**

下载vue项目就不多说了，大家既然搜索这个标题，肯定不差这一步

**依赖：**

1.下载sass-resources-loader

执行npm/cnpm install sass-resources-loader --save-dev

**修改配置**

打开build文件夹，找到下面的utils文件，找到exports.cssLoaders里的下面这段，将scss配置改成如下形式

return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less'),
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass'),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
    }

把scss项替换成如下形式

scss: generateLoaders('sass').concat({
      loader:'sass-resources-loader',
      options:{
        resources:path.resolve(__dirname,'../src/assets/sass/common.scss')
      }
    }),

这里我的common.scss放置了变量文件variable.scss和mixin.scss

// mixin.scss
    @import './variable.scss';
    @import './mixin.scss';

重新执行npm run dev 启动服务

在vue组件里写上一段试试吧，例如：

<style lang="scss">
    #app {
        font-size: 14px;
        font-family: "Avenir", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: $fontMainColor;
        height: 100%;
    }
    .triangle-top{
        display: inline-block;
        @include triangle(bottom, 10px, #ff0000)
    }
    .test{
        background: #ccc;
        @include box-shadow(0 0 5px rgba(0,0,0,.3));
    }
    </style>

发表评论取消回复

表情：

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

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

相关阅读

相关 vue定义全局变量

1、将从服务器请求的数据作为全局变量（全局变量模块挂载到Vue.prototype）在开发中，有时需要将从接口请求到的一些数据当做全局变量，在其他页面多次使用。比如...

墨蓝/ 2024年04月19日 10:58/ 0 赞/ 69 阅读

相关 vue引入全局静态变量_Vue-cli3配置全局环境变量

![88b0ea57f0f3ce2eb079ccfdf5251e5f.png][] 1.根目录下创建.env文件，里面可以用key=value的形式设置全局变量 ![087

- 日理万妓/ 2022年10月26日 14:10/ 0 赞/ 495 阅读

相关 vue 使用全局变量

vue 使用全局变量使用vue中的组件进行请求的时候免不了需要设置baseURL。但是这个baseURL最好不要写在某个全局的vue组件中。如果写到一个组件中的话，打包

缺乏、安全感/ 2022年06月08日 07:18/ 0 赞/ 263 阅读

相关 vue创建全局变量

1，单独建立一个Global.vue文件 <script> var adminName = "管理员"; var userName =

柔光的暖阳◎/ 2022年05月26日 01:59/ 0 赞/ 231 阅读

相关 Vue文件配置全局变量

首先新建一个.vue 文件用来定义全局变量 GLOBAL.vue  <script type="text/javascript"

左手的ㄟ右手/ 2022年05月17日 11:51/ 0 赞/ 268 阅读

相关 vue process全局变量

1、官方解释： process 对象是一个 global （全局变量），提供有关信息，控制当前 Node.js 进程。作为一个对象，它对于 Node.js 应用程序始终

太过爱你忘了你带给我的痛/ 2022年04月24日 06:12/ 0 赞/ 1354 阅读

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

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

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

相关 vue-写全局变量

main.js里面： ![在这里插入图片描述][20190510195359696.png] 其他地方： this.$AgencyId (注意this一定要指向vu

ゝ一世哀愁。/ 2022年02月02日 05:51/ 0 赞/ 261 阅读

相关 vue全局变量和Vue.prototype

一、使用Vue.prototype实现全局变量对于一个vue脚手架项目来说，在main.js里使用Vue.prototype声明的变量，实际上是为Vue对象添加了一个原

偏执的太偏执、/ 2022年01月25日 17:27/ 0 赞/ 1026 阅读

相关 sass 配置全局变量

场景：在前端工程中，我们会经常用到css预编译，有sass，less，styuls等，拿sass来说，通常我们会在项目里建一个`variables.scss`文件，里面会定义一

红太狼/ 2021年09月02日 05:36/ 0 赞/ 461 阅读