vue-使用sass扩展语言

使用SASS

SASS是Statements on Auditing Standards的缩写，意思是审计准则说明书，扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性，
生成良好格式化的 CSS 代码，易于组织和维护。

环境

• vue2.5
• vue-router
• webpack3.6

npm安装sass

npm i sass-loader node-sass -D

sass和scss的区别

SASS一种缩进语法，以换行和缩进制定代码标准。
SCSS 是 CSS 的扩展，语法完全兼容 CSS3，并且继承了 Sass 的强大功能。
也就是说CSS转换成SCSS只需要修改后缀名为.scss即可。

配置别名

在webpack.base.conf.js中配置相应文件夹别名：

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'views': resolve('src/views'),
      'assets': resolve('src/assets')
    }
  }

使用的样式如下：

引入全局样式

在assets/css/index.scss引入其他目录样式。
在App.vue中引入全局样式，需修改style标签的lang属性，即lang="scss"。

效果

参考

https://www.npmjs.com/package/sass-loader
https://baike.baidu.com/item/SASs/8316915?fr=aladdin
https://www.sass.hk/