vue-postcss-px2rem实现px转re

技术文档网 2021-04-16
  1. 安装 lib-flexible postcss-px2rem postcss postcss-loader
  2. webpack.base.conf.js以下配置 const webpack = require('webpack')
  • module添加 plugins: [ new webpack.LoaderOptionsPlugin({
    vue: {
      postcss: [require('postcss-px2rem')({remUnit: 37.5, propWhiteList: []})]
    },
    
    }) ],
  • rules添加 {
      test: /\.(css|less|scss)(\?.*)?$/,
      loader: 'style-loader!css-loader!postcss-loader'
    
    }
  1. 在main.jsimport 'lib-flexible/flexible'重新启动,配置生效

在rules添加这段会导致项目报错,去掉则恢复正常;所以这段是不需要的 { test: /.(css|less|scss)(?.*)?$/, loader: 'style-loader!css-loader!postcss-loader' }

相关文章

  1. Vue框架学习笔记

    Vue.js是目前最火的一个前端框架,React是最流行的前端框架(React除了开发网站,还可以开发手机App。Vue需要借助于Weex) 前端三大主流框架 Angular.js Reac

  2. vue-postcss-px2rem实现px转re

    安装 lib-flexible postcss-px2rem postcss postcss-loader webpack.base.conf.js以下配置 const webpack = req

  3. Vue中解决v-html事件无效问题

    1.Vue 项目中解决 V-html 中事件无效问题 html <template> <div ref="htmlCode"> </div> </te

  4. Vue单元测试踩坑

    单元测试的重要性,在这里就不过多阐述了。 这篇文章主要记录在vue项目中引入单元测试遇到的一些问题以及解决方案。 项目背景: 引入一些第三方库,如: element-ui组件库 echarts图表库

随机推荐

  1. Vue框架学习笔记

    Vue.js是目前最火的一个前端框架,React是最流行的前端框架(React除了开发网站,还可以开发手机App。Vue需要借助于Weex) 前端三大主流框架 Angular.js Reac

  2. vue-postcss-px2rem实现px转re

    安装 lib-flexible postcss-px2rem postcss postcss-loader webpack.base.conf.js以下配置 const webpack = req

  3. Vue中解决v-html事件无效问题

    1.Vue 项目中解决 V-html 中事件无效问题 html <template> <div ref="htmlCode"> </div> </te

  4. Vue单元测试踩坑

    单元测试的重要性,在这里就不过多阐述了。 这篇文章主要记录在vue项目中引入单元测试遇到的一些问题以及解决方案。 项目背景: 引入一些第三方库,如: element-ui组件库 echarts图表库