01项目初始化 并且全局配置less访问

 

// 把全局公共样式写到这里 index.less
@import "./reset.less";
@import "./base.less";
@import "./icon.less";
@import "./variables.less";

 

 

需要安装两个插件 yarn add  XXX -D

• style-resources-loader
• vue-cli-plugin-style-resources-loader

 

//vue.config.js
  /**
   * 第三方插件配置
   */
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
         path.resolve(__dirname, './src/styles/index.less')
      ]
   }

  }

 

使用

<style lang="less">
#app {
  h1 {
    color: @color-primary; //直接使用 无需导入
  }
}
</style>