vue2中使用sass并配置全局的sass样式变量的方法


Posted in Javascript onSeptember 04, 2018

Sass语言

      Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量、嵌套规则、mixins、导入等css没有但开发语言(如Java、C#、Ruby等)有的一些特性,并且完全兼容CSS语法。Sass有助于保持大型样式表结构良好。

      Sass有两种语法。

      一种称为SCSS,是一个CSS3语法的扩充版本,也就是说,所有符合CSS3语法的样式表也都是具有相同语法意义的SCSS文件,SCSS样式表文件要以.scss扩展名结尾。在vue中,我们可以使用<style lang="scss"></style>来标志里面的内容是以SCSS语法来书写的。

      一种称为SASS,是Sass以前的语法,它和python一样,没有{}大括号来标志程序块,而是以缩进来标志嵌套层级;而且也不使用分号,而是用换行符来分隔属性。SASS样式表文件要以.sass扩展名结尾。在vue中,我们可以使用<style lang="sass"></style>来标志里面的内容是以SASS语法来书写的。

在vue中使用样式文件sass,如果每个.vue文件都引入该样式,build出来文件后,势必会造成样式的重复,冗余,如果在main.js中全局引入一个scss文件,在其中定义变量在其他组件或者页面中引用报变量未定义错误,其他的样式可以正常显示,显然是编译的问题。那么,全局设置并加载样式就显得很有必要了!

首先,npm安装好

"sass-loader": "^6.0.7",
 "sass-resources-loader": "^1.3.3",

在build/webpack.base.conf.js中,在module的rules里添加

{
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
   }

然后在build/utils.js文件中加入如下代码:

需要注意的是:我的全局样式是放在src/common/sass/index.scss中的

function resolveResouce(name) {
  return path.resolve(__dirname, '../src/common/sass/' + name);
 }
 function generateSassResourceLoader() {
  var loaders = [
   cssLoader,
   'postcss-loader',
   'sass-loader',
   {
    loader: 'sass-resources-loader',
    options: {
     //这是用到的sass文件,多个文件时用数组的形式传入,这是带有变量和mixin的scss文件
     resources: [resolveResouce('variable.scss'), resolveResouce('mixin.scss')] 注意这是我全局样式的位置,个人不同,需做调整
    }
   }
  ];
  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }
 }

最后,将该页面下方的return部分,改成如下模样

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  //sass: generateLoaders('sass', { indentedSyntax: true }),
  //scss: generateLoaders('sass'),
  sass: generateSassResourceLoader(),
  scss: generateLoaders('sass')
   .concat(
    {
     loader: 'sass-resources-loader',
     options: {
      resources: path.resolve(__dirname, '../src/common/sass/index.scss') //注意这是我全局样式的位置,个人不同,需做调整
     }
    }
   ),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }

总结

以上所述是小编给大家介绍的vue2中使用sass并配置全局的sass样式变量,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
动态加载iframe
Jun 16 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 Javascript
VsCode插件整理(小结)
Sep 14 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
javascript实现蒙版与禁止页面滚动
Jan 11 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 #Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 #Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 #Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 #Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 #Javascript
create-react-app安装出错问题解决方法
Sep 04 #Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 #Javascript
You might like
PHP代码优化的53个细节
2014/03/03 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
PHP分享图片的生成方法
2018/04/25 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
js change,propertychange,input事件小议
2011/12/20 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
javascript 动态创建表格
2015/01/08 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
深入解析Python中的变量和赋值运算符
2015/10/12 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
常用的HTML5列表标签
2017/06/20 HTML / CSS
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
临床医学系毕业生推荐信
2013/11/09 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
企业文化口号
2014/06/12 职场文书
顶岗实习协议书
2015/01/29 职场文书
七年级上册生物的课件
2019/08/07 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB