既然要用到postcss我們就需要在項目中先引入postcss-loader,這時候修改utils.js下的postcss: generateLoaders(‘css’) 括號里添加css
然后在build下新建postcss.conf.js,添加以下代碼:
exports.postfactory = function (opts) {
// console.log(111111);
return [
//css中引入內聯樣式表
// require('postcss-easy-import')(),
//css混合宏的使用
require('postcss-mixins')(),
//css的for循環插件 必須在postcss-simple-vars之前運行
require('postcss-for')(),
require('postcss-each')(),
//類似於sass語法的css變量定義
require('postcss-simple-vars')(),
//sass擴展語法
require('postcss-sass-extend')(),
//css媒體查詢簡寫 https://github.com/postcss/postcss-media-minmax/blob/master/README-zh.md
require('postcss-media-minmax')(),
//css層級寫法 https://github.com/postcss/postcss-nested
require('postcss-nested')(),
//css選擇器簡寫
require('postcss-selector-matches')(),
require('postcss-selector-not')(),
//css縮寫與簡寫 crip的縮寫列表 https://github.com/johnie/crip-css-properties
require('postcss-alias')(),
require('postcss-crip')(),
//css瀏覽器兼容
require('autoprefixer')({ browsers: ['last 2 versions'] }),
//css計算
require("postcss-calc")
];
}
這個是一些postcss的插件引入上邊的東西可以根據項目具體要求引入。
在package.json中引入
"postcss": "^5.2.0",
"postcss-alias": "^0.2.2",
"postcss-calc": "^5.3.1",
"postcss-crip": "^2.0.0",
"postcss-each": "^0.9.3",
"postcss-for": "^2.1.1",
"postcss-media-minmax": "^2.1.2",
"postcss-mixins": "^5.2.0",
"postcss-nested": "^1.0.0",
"postcss-sass-extend": "^0.0.1",
"postcss-selector-matches": "^2.0.5",
"postcss-selector-not": "^2.0.0",
"postcss-simple-vars": "^3.0.0",
這個是上邊那些插件的版本,也不一定的可以按需修改。
在vue-loader.conf.js文件中復制以下代碼,原來的可以刪掉了:
'use strict'
const utils = require('./utils')
const config = require('../config')
const postcssConfig = require('./postcss.conf')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap
module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
},
postcss: postcssConfig.postfactory()
}
在這些配置完成之后,在CMD命令中執行命令:npm install 這個是下載你的配置依賴(這個一定要做 很重要) 之后運行你的項目。（以上這些來自公司同事的分享,在這里分享給大家）
如果有更好的使用postcss的方式,請指引。