如何在vue-loader中使用postcss（丟失的網格）

Question

我正在嘗試使用Vue2，並在我的應用中使用迷失網格（http://lostgrid.org/）。 Lost-grid是一個postcss網格系統，我已經可以在webpack2的反應應用程序中使用這個無數次了。

如何在vue-loader中使用迷失網格？我已經通過npm安裝了'lost'，並嘗試了添加postcss加載器的不同方式。似乎沒有任何工作，文件也沒有什麼幫助。

這裏是webpack.base.conf.js的部分業務（如我undersrtand它，所有的CSS加載通過VUE裝載機運行）：

module: { 
    rules: [ 
     { 
     test: /\.(js|vue)$/, 
     loader: 'eslint-loader', 
     enforce: "pre", 
     include: [resolve('src'), resolve('test')], 
     options: { 
      formatter: require('eslint-friendly-formatter') 
     } 
     }, 
     { 
     test: /\.vue$/, 
     loader: 'vue-loader', 
     options: vueLoaderConfig 
     }, 
     { 

... 

VUE，loader.conf.js看起來像：

var utils = require('./utils') 
var config = require('../config') 
var isProduction = process.env.NODE_ENV === 'production' 

module.exports = { 
    loaders: utils.cssLoaders({ 
    sourceMap: isProduction 
     ? config.build.productionSourceMap 
     : config.dev.cssSourceMap, 
    extract: isProduction 
    }) 
} 

utils.js看起來是這樣的：

var path = require('path') 
var config = require('../config') 
var ExtractTextPlugin = require('extract-text-webpack-plugin') 

exports.assetsPath = function (_path) { 
    var assetsSubDirectory = process.env.NODE_ENV === 'production' 
    ? config.build.assetsSubDirectory 
    : config.dev.assetsSubDirectory 
    return path.posix.join(assetsSubDirectory, _path) 
} 

exports.cssLoaders = function (options) { 
    options = options || {} 

    var cssLoader = { 
    loader: 'css-loader', 
    options: { 
     minimize: process.env.NODE_ENV === 'production', 
     sourceMap: options.sourceMap 
    } 
    } 

    // generate loader string to be used with extract text plugin 
    function generateLoaders (loader, loaderOptions) { 
    var loaders = [cssLoader] 
    if (loader) { 
     loaders.push({ 
     loader: loader + '-loader', 
     options: Object.assign({}, loaderOptions, { 
      sourceMap: options.sourceMap 
     }) 
     }) 
    } 

    // Extract CSS when that option is specified 
    // (which is the case during production build) 
    if (options.extract) { 
     return ExtractTextPlugin.extract({ 
     use: loaders, 
     fallback: 'vue-style-loader' 
     }) 
    } else { 
     return ['vue-style-loader'].concat(loaders) 
    } 
    } 

    // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html 
    return { 
    css: generateLoaders(), 
    postcss: generateLoaders(''), 
    less: generateLoaders('less'), 
    sass: generateLoaders('sass', { indentedSyntax: true }), 
    scss: generateLoaders('sass'), 
    stylus: generateLoaders('stylus'), 
    styl: generateLoaders('stylus') 
    } 
} 

// Generate loaders for standalone style files (outside of .vue) 
exports.styleLoaders = function (options) { 
    var output = [] 
    var loaders = exports.cssLoaders(options) 
    for (var extension in loaders) { 
    var loader = loaders[extension] 
    output.push({ 
     test: new RegExp('\\.' + extension + '$'), 
     use: loader 
    }) 
    } 
    return output 
} 

現在的問題是......我在哪裏放什麼？任何幫助將不勝感激。

Answer 1

以下行添加到版本所VUE-loader.config.js文件/

postcss: [ 
    require('autoprefixer')({ 
     browsers: ['last 7 versions'] 
    }) 
] 

所以它看起來像這樣：

module.exports = { 
    loaders: utils.cssLoaders({ 
    sourceMap: isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap, 
    extract: isProduction 
    }), 
    postcss: [ 
    require('autoprefixer')({ 
     browsers: ['last 7 versions'] 
    }) 
    ] 
} 

Answer 2

「browserslist」：[ 「> 1 ％」， 「最後2個版本」， 「不是IE < = 8」 ]

在的package.jsonħ大家定義，你可以看到https://github.com/ai/browserslist#config-file