码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-07-09 12:43:56      阅读:375      评论:0      收藏:0      [点我收藏+]

标签:方便   dal   margin   luci   vue   语言   post   uri   程序   

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+sass定义全局变量,后缀名.scss报错之解决

标签:方便   dal   margin   luci   vue   语言   post   uri   程序   

原文地址:http://blog.51cto.com/smalljiayi/2139052

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!