如何在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