Vue2项目架构搭建（四）——Sass和css引入

sass引入

     方法一：在main.js中加入

import "./style/***/****.scss";

     方法二：在App.vue文件的style

@import "./style/***/****.scss";

     方法三：在vue文件的style中写sass语句，需要设置style的lang属性为“scss”否则会无效，scoped表示只对该组件生效。

<style lang="scss" scoped>
  div{
    img{
      border: 1px solid #bfbfbf;
    }
  }
</style>

安装sass编译器

        vue-cli并没有安装sass的编译器，因此不管是在vue文件style中的sass语法还是scss文件都是无法被编译成css样式，无法被浏览器识别的。

        sass的编译器需要sass-loader还需要node-sass才能正常工作，但是vue-cli没有预安装这两个编译器，因此需要手动安装  

npm install --save-dev sass-loader node-sass

安装成功后，重启服务，发现sass的语句已经编译成css样式了，而且也起效果了。

Css文件引入

        css文件的引入和sass文件引入一样，但是vue-cli已经将css在vue文件编译器已经安装好了，因此只需要直接引入或者在style中书写就ok了！

本人才疏学浅，如果哪位小伙伴发现问题或者有更好的优化，希望能留言我好及时修改和优化，大家一起学习一起进步，免得被不合理或者错误的东西误导后续看到此博文的小伙伴。