vue中配置scss全局变量的步骤

　　在写项目的过程中，如果用的是scss来编写样式代码，常常需要定义各种变量，例如主题色、主字号之类的，因此我们会把这些变量写到一个单独的_variable.scss文件内，但是每次都要在vue单文件内引入这些变量未免太繁琐了，所以有没有办法可以默认把变量文件作为全局文件进行引入呢？答案是肯定的，可以用下面的方法进行配置，可以根据当前使用的框架和环境来进行方法的选择。

　　一、使用vue-cli（即vue-cli2）脚手架时

　　1. 首先，需要安装一个loader，sass-resources-loader

npm install sass-resources-loader --save-dev

　　2. 找到build文件夹下的utils.js文件，在文件内找到这段配置代码

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

　　3. 修改其中的scss项，改为

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

　　4. 重启项目，即可在其他文件内使用这些变量文件了

　　二、使用@vue/cli（即vue-cli3）脚手架时

　　1. 找到vue.config.js文件，如果没有的话，则自己在根目录新建一个即可

　　2. 在文件内编写如下代码：

module.exports = {
 css: {
  loaderOptions: {
   sass: {
    data: `@import "@/styles/_variable.scss";`
   }
  }
 }
}

　　3. 重启项目，即可使用

　　注意：如果编写完以上代码，重启项目后出现这个错误：

Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.

　　那么说明，你安装的sass-loader应该是V8的版本，可以在package.json中查看是否确实如此，如果的确是v8版本以上，则需要配置不同的写法，因为在V8中已经废除了data这个配置项，改为了prependData，具体可以在vue cli官网中看到此说明。【传送门】

　　因此，我们需要将配置代码修改成如下样式：

css: {
  loaderOptions: {
    sass: {
      prependData: `@import "~@/styles/_variable.scss";`
    }
  }
}

　　好了，重启一下项目，大功告成。

以上就是vue中配置scss全局变量的步骤的详细内容，更多关于vue配置scss全局变量的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 详解Vue 全局引入bass.scss 处理方案

    为解决在Vue组件中全局引入 scss 变量及 mixins ,装载了一个名为 "sass-resources-loader" 解析器. 安装 $ > cnpm i -D sass-resources-loader 配置 配置的话是在 vue 的 loader 解析器中配置,即在 vue-cli 脚手架方式构建出来的文件中是以 build/utils.js,在该文件中定义了 cssLoaders() 方法,该方法定义了诸如 css.less的解析方式,具体如下. // build

  • Vue + Scss 动态切换主题颜色实现换肤的示例代码

    根据预设的配色方案,在前端实现动态切换系统主题颜色. 大概的思路就是给html根标签设置一个data-theme属性,然后通过js切换data-theme的属性值,Scss根据此属性来判断使用对应主题变量.这里可以选择持久化Vux或接口来保存用户选择的主题. 一.首先需要给项目下载配置Scss 1.安装依赖 npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 { t

  • 详解Vue2 添加对scss的支持

    引入loader cnpm install node-sass --save-dev cnpm install sass-loader --save-dev cnpm install style-loader --save-dev scss支持 为了使用scss,我们需要先安装相关的node包: npm install --save style-loader sass-loader node-sass file-loader 安装好之后,为了可以在.vue和.scss中使用,需要在webpack

  • vue项目中全局引入1个.scss文件的问题解决

    vue项目中全局引入1个.scss文件的问题解决

    首先先发一下我的项目路径 1. 首先要下载   sass-resources-loader npm install sass-resources-loader --save-dev 2.然后再文件夹build/utils里面的更改 scss: generateLoaders('sass') scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.reso

  • vue项目中使用scss的方法步骤

    一 概述 随着sass/less等css预处理器的出现,编写css变的越来越有乐趣.所以现在越来越多的人在项目中喜欢使用scss或者less.(我自己就是一个).由于最近在写一个vue项目.所以就把写项目期间每天的一些知识点写在博客里.所以最近的博客应该都会和vue有关.今天要和大家分享的就是如何在vue项目中引入scss(引入less也类似) 二 vue中引入scss 2.1 vue-loader 在讲如何在vue项目中使用scss之前,我们先来简单了解一个概念,那就是vue-loader.v

  • 解决vue scoped scss 无效的问题

    今天遇到scoped内部的scss设置无效,解决办法如下: /deep/ <style scoped lang="scss"> .position-el-steps { /deep/ .el-step.is-vertical { .el-step__description { margin-top: -20px; } .el-step__line { border-left: 2px dashed #c0c4cc; background-color: transparent

  • 浅谈关于vue中scss公用的解决方案

    浅谈关于vue中scss公用的解决方案

    简述 最近由于项目要求查阅了很多关于scss公用的文章,以下只是对那些文章进行简单的总结 解决方法 a.当我们要使用scss文件的共用时,首先我们就要想到如何应当如何编辑scss文件,比如降低scss文件的变量与混入的耦合,我们可以将scss文件中的变量和混入分离开来使用单独的文件存储,此外还可以编写一些默认样式的scss文件 . variable.scss:存储scss变量的文件 @charset 'utf-8'; $bg:skyblue; $w:100px; $h:100px; $tsize

  • 在 vue-cli v3.0 中使用 SCSS/SASS的方法

    在项目中使用 SCSS/SASS 进行样式编写无疑会节省很多开发样式的时间.关于如何在 vue-cli v3.0 中使用 SCSS/SASS,这里提供三种方案.前提是在使用 vue-cli 生成项目时勾选了 CSS Pre-processors (CSS预处理器),否则无法在项目中直接使用. 方案一:在组件中直接使用 在组件中直接使用 SCSS/SASS 是最简单的方式: <style lang="scss" scoped> </style> 通过 lang 选

  • vue2配置scss的方法步骤

    1.安装文件 npm install --save-dev sass-loader npm install --save-dev node-sass 2.配置 webpack.base.conf.js 找到webpack.base.conf.js文件的module模块下面的rules添加以下代码 ... { test: /\.scss$/, loaders: ["style", "css", "sass"] }, ... 注意:这里loaders

  • vue安装和使用scss及sass与scss的区别详解

    vue安装和使用scss及sass与scss的区别详解

    1. 安装依赖:npm install node-sass sass-loader -D 2. webpack.base.conf.js文件 module: { { //手动添加这一条,相当于是编译识别sass! test: /\.scss$/, loaders: ["style", "css", "sass"]} } 3. 在.vue文件中使用 <style scoped lang="scss"> .box{ w

随机推荐