前端 - webpack autoprefixer 对import和require的css文件没有生效

问题描述

问 题

使用vue-cli构建的开发环境，autoprefixer没有处理import 和 require 的css文件，
vue文件中写的没有问题，请问怎么处理？

解决方案

在vue文件中@import的方式引入css文件：

安装postcss-import

var postcssImport = require('postcss-import')
...
vue: {
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
    // postcss: [
    //   require('autoprefixer')({
    //     browsers: ['last 2 versions', 'ios >= 7.0']
    //   })
    // ]
    postcss: function(webpack) {
      return [
        postcssImport({
          addDependencyTo: webpack
        }),
        require('autoprefixer')({
          browsers: ['ios >= 7.0']
        })
      ]
    }
  }

js文件中require方式引入css文件暂时没有找到合适的方法，
但是发现了一个bug，就是使用require引入css文件时不能使用css-loader

这篇关于前端 - webpack autoprefixer 对import和require的css文件没有生效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！