vue --- 项目中引入sass

1.引入外部css

vue脚手架搭建的项目".vue"文件下方会有style标签，供我们书写css，但我们为了实现结构样式相分离就需要在外部书写css，这样代码看起来更清晰。

首先我们在assets文件夹下建立css文件夹用来保存我们的css文件，在css文件中直接书写css代码，在".vue"文件中的script标签里使用import引入assets里的样式

import '../assets/css/detail/detail.css';

这里说一下assets文件夹与static文件夹的区别，assets文件在src里面，常用来放置样式、静态图片，打包时会进行打包编译，assets中的文件在vue中的template/style下引用时，用../这种相对路径的形式，在script下必须用@import的方式引入。static文件不需要打包就直接放在最终的文件里了，常用来放没有npm包的第三方插件，字体文件等，static下的文件在.vue中的任何地方都只要使用../这种相对路径的方式引入；

2.sass与scss的区别

首先是文件扩展名不同，sass 是以“.sass”后缀为扩展名，而 scss 是以“.scss”后缀为扩展名，sass 和 scss 都是更改html样式的文件，都称之为 sass，最终都是要编译成css，不同之处主要在于语法形式上，sass是靠缩进表示嵌套关系，scss是花括号，可以理解为scss是sass的一个升级版本，兼容了sass；

//sass 个人不习惯，比较难看
header
    width:100px;
    span
        color:red;
//scss 顺眼，像是css简单明了
header{
    width:100px;
    span{
        color:red;
    }
} 

其次scss能做运算、写函数，写全局变量，但是我只是作为语法糖用而已，常用的功能有：

语法嵌套，使用变量 $color : #025214；继承 @extend，混入 @mixin

3.在components文件夹内的".vue"文件内部使用sass

安装依赖

npm install sass-loader --save-dev

npm install node-sass --save-dev

安装完成之后查看pakeage.json文件devDependencies下是否能搜到安装依赖的版本

在build文件夹下的webpack.base.conf.js的rules里面添加配置

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

在.vue文件style标签中添加lang="scss"

<style scoped lang="scss">
  .index{
    color: red;
    span{
      color: forestgreen;
    }
  }
</style>

npm run dev运行查看样式

4.在components文件夹内的".vue"文件内引入外部sass文件

像上面那样在style标签里添加lang="scss"属性，而后直接写在style标签里面的样式无疑不符合结构样式相分离的宗旨，而且这样写会感觉很乱，所以我们首先还是在assets文件夹下建立sass文件夹用来保存我们的scss文件，在scss文件中直接书写scss代码，在".vue"文件中的script标签里使用import引入assets里的样式

//scss代码
$fontSize:30px;//变量
.index{
    color: yellowgreen;
    font-size: 20px;
    span{
      color: forestgreen;
      font-size: $fontSize;
    }
}

​//引入scss文件
<style scoped lang="scss">
  @import "../assets/sass/index.scss"
</style>

​

注意引入时不要加url()

 @import url("../assets/sass/index.scss")

这样写虽然不会报错，但不会生效；

5.在"App.vue"或"main.js"文件内引入外部sass文件

虽然上面的方法也能引入外部的scss文件，但每个页面都要引一次，感觉还是不爽；我们还可以在app.vue或main.js内全局引入样式，就像使用element-ui和mint-ui一样爽，只需要在入口文件内引一次，全局都可以用；

重复上面的步骤，在assets文件夹下的sass文件夹建立一个的scss文件，用来存放所有的scss文件

home.scss文件内引入其他组件需要用到的样式，

//引入index组件样式
@import "./index.scss";
//引入my组件样式
@import "./my.scss";

在app.vue或main.js内引入home.scss文件就可以使用了

//在main.js内引入
import "./assets/sass/home.scss"

样式效果

：

//在app.vue内引入
<style lang="scss" >
   @import "./assets/sass/home.scss"
</style>

样式效果

后面两条其实就是两种引入方式的问题，第4条为按需引入，第5条为全局引入，使用时看个人喜好吧