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>

相关文章