vue2.0 樣式表引入的方法 css sass less

在引入樣式之前，首先要了解static、assets兩個文件夾的區別。

從字面上可以看出，static用來存放靜態文件，assets用來存放資源文件；

static存放的文件不會被編譯，打包后直接賦值到項目中；assets文件會被webpack編譯；

舉個簡單的栗子：static的圖片資源會完全一樣的被復制到打包文件中，而assets里面的圖片資源會打上時間戳；

當然這里還有很多細節的地方，我就暫時不多說了；

本栗子中，我將same.css文件放在static下；而將common.scss文件放在assets下；

 

一、引入全局css文件

1、same.css放在項目的static文件夾下

2、在App.vue中引入，這樣就可以全局使用same.css樣式表；代碼如下

3、這里需要注意的問題：

• @import "文件路徑" 是sass的用法，所以要先配置sass
• 在這里只能引入.css后綴的文件，.scss后綴文件需要編譯，所以不能在這里引入

<style lang='scss'>
  /*引入無須編譯的css文件*/
  @import '../static/css/same.css';
</style>

 

 

二、引入sass、less文件

sass、less文件需要編譯，所以按照css方法的引入方式是不行的；

1、將common.scss放在項目的assets文件夾下

2、在home.vue組件中引入common.scss樣式表；代碼如下

<style scoped lang='scss'>
  @import "../assets/scss/common";
</style>