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

时间:2023-01-03 20:18:39

在引入样式之前,首先要了解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>