vue+sass定义全局变量，后缀名.scss报错之解决

vue在现在程序员圈中，已经是众所周知了，那么在我们去使用vue的过程中经常会使用强大的css预处理语言sass，那么在这个过程中我们有各种问题，下面我们就简单的介绍其中一个小编碰到的问题；在使用scss中，我们定义了变量方便更改整个项目的配色，那么我们在main.js中引入全局scss文件，但直接引入scss文件会报错。那么针对此类问题我们有两种处理方式第一、各个组件中引入（这个方法的弊端相信大

smalljiayi

2929人浏览 · 2018-07-09 11:13:10

smalljiayi · 2018-07-09 11:13:10 发布

vue在现在程序员圈中，已经是众所周知了，那么在我们去使用vue的过程中经常会使用强大的css预处理语言sass，那么在这个过程中我们有各种问题，下面我们就简单的介绍其中一个小编碰到的问题；

在使用scss中，我们定义了变量方便更改整个项目的配色，那么我们在main.js中引入全局scss文件，但直接引入scss文件会报错。

那么针对此类问题我们有两种处理方式

第一、各个组件中引入（这个方法的弊端相信大家都看得到，就是需要在每一个组件中引入，写重复的代码）如下：

import ../assets/css/common.scss;

这种方式很显然我们每个程序员都是不推荐的；

第二、全局引入

首先，需要安装一个开发插件：sass-resources-loader

npm i sass-resources-loader --save-dev

接着，修改我们脚手架中build/utils.js文件，修改scss的加载设置

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

修改为：

 return {
     css: generateLoaders(),
     postcss: generateLoaders(),
     less: generateLoaders('less'),
     sass: generateLoaders('sass', { indentedSyntax: true }),
     scss: generateLoaders('sass').concat({
         loader: 'sass-resources-loader',
         options: {
             resources: path.resolve(__dirname, '../src/assets/css/common.scss')
          }
     }),
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')
  }

之后重新启动项目，并且在main.js中引入公共的常量文件即可。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^