在vue-cli项目中,使用press

在vue-cli项目中,使用precss

1、npm 安装:

npm install precss
根据需要还可以一同安装postcss-functions、autoprefixer

2、修改build/vue-loader.conf.js

const precss = require('precss')
const autoprefixer = require('autoprefixer')

module.exports = {
  // 以前写好的选项...
  postcss: {
    plugins: [precss, autoprefixer]// 这里是postcss的插件列表
  }
}

3、检查下webpack.base.conf.js对于.vue的options是不是引用的build/vue-loader.conf.js

module: {
    rules: [
    // 以前写好的选项...
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      }
    ]
}

4、在.vue文件里面的<style> 可以这样写:

<style lang="postcss" type="text/css" rel="stylesheet/postcss">

5、即可。

一些坑:
1/
precss没有计算表达式的功能
如:width: (9/326)px; 会报错

2/如果vue-loader的版本没有13.3.0,那么会报错:

after.after is not a function

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值