vue中css/scss使用（下）

内容太多分为上下两章，本章主要是scss的使用，css使用可以参见上一章Vue中css/scss使用（上）

使用scss需要在 <style> 加上lang="scss"

内部样式

在组件 <style> 使用scss跟使用css几乎没有区别，直接使用scss语法就可以，并且scss可以使用根路径写法： "/src/assets/..."

背景图片路径： /src/assets/logo.png

/src/views/AboutView.vue

 <template>
   <div class="about">
     <h1>This is an about page</h1>
     <div class="box"></div>
   </div>
 </template>
 ​
 <style lang="scss">
 .about {
   background-color: pink;
   .box {
     width: 200px;
     height: 200px;
     /* background-image: url("../assets/logo.png"); */
     /* scss可以使用路径写法："/src/assets/..." */
     background-image: url("/src/assets/logo.png");
   }
 }
 </style>

外部样式

@import

外部样式可以通过 @import引入，但是此时的 @import使用的scss中的 @import而不是css中的

@import url() 则不能够在使用，因为 @import url() 不会解析文件中的scss语法

需要注意使用文件引入方式，scss中使用图片路径是以组件所在目录为起点，不是scss文件所在目录为起点

根路径写法： "/src/assets/..." 在脚手架 @vue/cli5中 @import和scss文件都可以使用，而在 @vue/cli4.5只能用于 @import

/src/assets/css/about.css

 .about {
   background-color: pink;
   .box {
     width: 200px;
     height: 200px;
     /* 不是scss文件所在目录为起点,所以找不到图片会报错 */
     /* background-image: url("../logo.png"); */
     /* 以.vue文件所在目录为起点 */
     background-image: url("../assets/logo.png");
     /* 直接使用根路径写法引入 */
     /* background-image: url("/src/assets/logo.png"); */
   }
 }

/src/views/AboutView.vue

 <template>
   <div class="about">
     <h1>This is an about page</h1>
     <div class="box"></div>
   </div>
 </template>
 ​
 <style lang="scss">
 @import "../assets/css/about.scss";
 /* 直接使用根路径写法引入 */
 /* @import "/src/assets/css/about.scss"; */
 </style>

src

使用 <style> 中的src也可以引入scss文件

在 @vue/cli5时使用 @import和src在引入scss文件时，scss文件内部图片路径写法没有区别，都是以组件所在目录为起点

但是在 @vue/cli4.5时使用 @import引入scss文件时，scss文件中使用图片路径是以组件所在目录为起点，而使用src引入scss文件时scss文件中使用图片路径是以文件所在目录为起点

@vue/cli4.5的 @import

/src/assets/css/about.css

 .about {
   background-color: pink;
   .box {
     width: 200px;
     height: 200px;
       background-image: url("../assets/logo.png");
   }
 }

/src/views/About.vue

 <template>
   <div class="about">
     <h1>This is an about page</h1>
     <div class="box"></div>
   </div>
 </template>
 ​
 <style lang="scss">
 @import "../assets/css/about.scss";
 </style>

@vue/cli4.5的src

/src/assets/css/about.css

 .about {
   background-color: pink;
   .box {
     width: 200px;
     height: 200px;
       background-image: url("../logo.png");
   }
 }

/src/views/About.vue

 <template>
   <div class="about">
     <h1>This is an about page</h1>
     <div class="box"></div>
   </div>
 </template>
 ​
 <style lang="scss" src="../assets/css/about.scss">
 </style>

scoped

跟使用css不同的是在scss中使用 @import引入的文件会被编译到当前组件的 <style> 中

这样就意味着可以直接使用 @import引入，不需要在 <style> 中使用src引入

/src/views/AboutView.vue

 <template>
   <div class="about">
     <h1>This is an about page</h1>
     <div class="box"></div>
   </div>
 </template>
 ​
 <style lang="scss" scoped>
 @import "../assets/css/about.scss";
 </style>

关于public

关于图片存放在public中的使用方式通css一样，移步上一章自行参考