vue-cli3引入less预处理语言

一. 引入less

npm install less less-loader --save-dev

二. 引入样式资源处理器

在style资源中注入css / sass / scss / less / stylus这些内容。

主要作用导入一些公共的样式文件,避免在每个样式文件中手动的@import导入。

vue add style-resources-loader

选择CSS Pre-processor :less

三. 全局引入less文件

在项目根目录找到vue.config.js文件,如果没有就创建这个文件。我这里全局引入了公共字体,颜色样式文件。

// vue.config.js文件
const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, 'src/assets/less/color.less'), path.resolve(__dirname, 'src/assets/less/font.less')]
    }
  }
}

你可能感兴趣的:(vue)