实用插件--页面样式

2021-06-06 189 阅读1分钟

Less自动化导入

让vue组件自动加入公共样式,每一个业务组件都手动引入然后使用的话，开发量巨大且繁琐

使用流程:

下载包,因为是vue-cli的插件,使用vue来下载

vue add style-resources-loader

安装完毕后会在vue.config.js中自动添加配置

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: []
    }
  }
}

把需要注入的文件配置一下后，重启服务

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 配置哪些文件需要自动导入
        path.join(__dirname, './src/styles/xxx.less')
      ]
    }
  }
}

设置完成后就会在每个vue文件自动引入配置好的less文件,可以直接在页面使用文件中设置好的less变量,不需要再次引入

手动引入方式对比:

<style scoped lang='less'>
  @import '~@/styles/xxx.less';
  div {
    color: @less变量;
  }
</style>

重置样式

下载包

npm i normalize.css

在 main.js 导入 normalize.css 即可

import 'normalize.css'