Vue项目添加CSS

一、公共样式

在项目中，我们把公共样式统一放在assets/css下，比如项目的reset.css文件、公共文件common.css，然后分别在main.js中引入。

二、添加CSS预处理

vue-cli使用sass或者less在创建项目时会有选择添加选项，如果没有选择也可以自己安装，然后在 vue.config.js的 css 选项中配置 less/sass全局使用变量就可以了。

1、安装

// Less
npm install -D less-loader less
// Sass
npm install -D sass-loader sass
// 其他
npm install -D postcss
npm install -D postcss-loader
npm install -D style-resources-loader
npm install -D vue-cli-plugin-style-resources-loader

2、定义全局样式

less或者sass如果公共文件过多，我们可以通过@import 引入到一个文件中，然后统一在vue.config.js进行引入。

├── less               
│   ├── _flex.less     # flex布局样式
│   ├── _common.less   # 公共样式
│   └── main.less      # less主文件

// main.less
// 自定义公共样式
@import "./_flex.less";
@import "./_common.less";

配置less全局使用

// vue.config.js
const path = require("path");
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // 全局配置less
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          // DO NOT REMOVE THIS LINE
          javascriptEnabled: true,
          globalVars: {
            // less vars，customize ant design theme
            // 'primary-color': '#F5222D',
          }
        }
      }
    }
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, './src/assets/less/main.less')]
    }
  }
})

配置sass全局使用

// vue.config.js
const path = require("path");
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // 全局配置sass
  css: {
    loaderOptions: {
      sass: {
        // @是src的别名
        prependData: `@import "@/assets/sass/main.scss"`
      },
      scss: {
        prependData: `@import "@/assets/sass/main.scss";`
      }
    }
  }
})