关于vue-cli生成的项目中使用postcss

1.直接进入主题

在build中找到webpack.base.conf.js文件，修改vue-loader的配置。vue-cli生成的项目默认配置以下

{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
    }复制代码

vue-loader的配置写在vueLoaderConfig里面，本页面头部能够看到：

const vueLoaderConfig = require('./vue-loader.conf')复制代码

因此直接在build目录下的vue-loader.conf.js文件下找到相关配置。

2.直接在loaders下添加以下配置便可

postcss:[
require('autoprefixer')({
  browsers:['last 2 versions']
}),
require('precss')({
  browsers:['last 2 versions']
})]复制代码

目前只导入2个插件做为测试使用，其中autoprefixer自动增长浏览器前缀，直接引用便可。precss需cnpm install后再引入使用。

3.附vue-loader.conf.js文件完整配置

'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction
  }),
  transformToRequire: {
    video: 'src',
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  },
  postcss:[
    require('autoprefixer')({
      browsers:['last 2 versions']
    }),
    require('precss')({
      browsers:['last 2 versions']
    })
   ]
}复制代码

4.在.vue文件中测试效果

<template>
<div class="home" id="home">
    i am home
    <span>132</span>
</div>
</template>
<style lang="postcss" scoped>
    .home{
            transform: rotate(45deg);
            display: flex;
            span{
                color: red;
            }
        }
</style>复制代码

浏览器会自动补全前缀正常显示样式，配置完成。