阅读 115

实用插件--页面样式

Less自动化导入

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

使用流程:

  1. 下载包,因为是vue-cli的插件,使用vue来下载
vue add style-resources-loader
复制代码
  1. 安装完毕后会在vue.config.js中自动添加配置
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: []
    }
  }
}
复制代码
  1. 把需要注入的文件配置一下后,重启服务
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>
复制代码

重置样式

  1. 下载包
npm i normalize.css
复制代码
  1. main.js 导入 normalize.css 即可
import 'normalize.css'
复制代码
文章分类
前端
文章标签