这是我参与「第五届青训营」伴学笔记创作活动的第 9天 青训营大项目笔记

资源文件

Nuxt 使用 vue-loader、file-loader 以及 url-loader 这几个 Webpack 加载器来处理文件的加载和引用。对于不需要通过 Webpack 处理的静态资源文件，可以放置在 static 目录中

1、assets目录

特点：

assets目录下的图片，less，scss等资源会被webpack编译。
行内样式使用图片时，不会被webpack编译，需要手动使用require加载图片

引用静态资源

 <img src="~/assets/imgs/1.jpg" alt="" />

2、static目录

特点：

加载时资源时相对static目录找资源，比如：加载assets目录下的文件
```
<img src="1.png" />
```
Nuxt直接使用资源文件，不做任何处理

总结：预处理器简化或者复用代码，使用预处理需要先安装对应的包

3、使用css/html预处理器

（1）less

nuxt项目中使用less全局样式、全局变量的配置

安装less和指定版本的 less-loader，管理员打开命令行

npm install less less-loader@7.0.0 --save-dev

npm install less less-loader --save

安装style-resources

npm install @nuxtjs/style-resources --save

在static目录中创建base.less文件和variables.less文件，用来写全局样式和全局变量，打开nuxt.config.js文件，并找到css

css: [
        '~/static/base.less'    // 全局样式添加在此处
],
 buildModules: [
    '@nuxtjs/style-resources'
  ],
styleResources:{
     less:[ '~/static/variables.less']
  },

案例：

static/base.less文件——全局样式

  main {
    margin: 0 auto;
    margin-top: 25vh;
    margin-bottom: 2rem;
    padding: 0 1rem;
    max-width: 1280px;
    text-align: center;
  }
  
  h1 {
    // 使用全局less变量
    color: @secondary;
  }

static/variables.less——全局变量

@primary:blue;
@secondary:dodgerblue;

（2）less、scss/pug

scss是动态样式语言，与所有版本的 CSS 兼容，包含 CSS 中缺少的缩进
less也是动态样式语言，比css多很多功能（如变量，继承，运算，函数）， Less 既可以在客户端上运行，也可在服务端运行
pug是html模板引擎，作用是让html代码更加精简

总结：scss或less，都是基于css之上的高级语言，使得css开发更灵活和更强大

Nuxt资源文件|青训营笔记