關於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>複製代碼

瀏覽器會自動補全前綴正常顯示樣式，配置完成。