使用vue搭建应用三引入scss

Css、Sass、Scss的含义及区别

Css(Cascading Style Sheets)

　　层叠样式表 

Sass(Syntactically Awesome StyleSheets)

　　是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅

　　使用 Sass 以及 Sass 的样式库有助于更好地组织管理样式文件，以及更高效地开发项目。

Scss(Sassy CSS)

　　是 Sass 3 引入新的语法，是Sassy CSS的简写，是CSS3语法的超集

不同之处：

　　文件扩展名不同:

　　　　Sass 是以“.sass”后缀为扩展名，

　　　　SCSS 是以“.scss”后缀为扩展名

　　语法书写方式不同:

　　　　Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号

　　　　SCSS的书写需要使用分号和花括号

sass

#ABC
  width: 30%
  height:100%

scss

#ABC {
  width: 30%;
  height:100%;
}

1.安装SCSS

编写页面样式会用到SCSS，安装

yarn add sass-loader node-sass

出现

　　sass-loader@8.0.0" has incorrect peer dependency "webpack@^4.36.0".

换成命令

yarn add sass-loader@7.3.1 node-sass

在build/vue-loader.conf.js的rules下添加

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

2.使用

在页面中style标签修改为

<style lang="scss">
    ……
</style>

eg:

　　修改404.vue