vue-cli 构建项目中不能使用css-loader？

Question

最开始遇见的问题是项目中的css私有前缀补全的问题，使用autoprefixer是能补全vue文件中的css样式，
不能补全js中require和vue中import引入的css文件

折腾了一番，import引入的方式前缀补全解决了，看这里

在解决require引入的时候发现一个新的问题，就是webpack中不能使用css-loader，会报错

...
loaders: [
    {
        test: /\.css$/,
        loader: 'style!css'
    }
]
...

报错是这样的

请问大家遇到这样的问题怎么解决的呀？

Answer 1

vue-cli@2.8.1
在 package.json 配置文件中有一个字段 "browserslist" 是用于定位浏览器版本的

"browserslist": [
    "> 1%",
    "last 10 versions",
    "not ie <= 8"
  ]

https://github.com/ai/browser...

Answer 2

最新的vue-cli已经没有这个问题了

Answer 3

我用的是vue-cli@2.8.1,也遇到了这个问题，我是这样解决的：
首先install postcss-loader
在utils.js中加入postcss-loader对样式的处理：

在webpack.base.conf.js中加入如下代码：

记得要将webpack,autoprefixer require进来

Answer 4

不能用自己的加载器，必须去掉你的cssloader，因为webpack.dev.conf.js里面有一个vuecli自己定义的加载器，专门处理css样式的，如果想用自己的加载器就不能用他自动生成styleLoaders，我昨天也是试了很久才发现vuecli有自己的样式加载器，同样的在webpack.prod.conf.js里面也一样有默认的styleLoaders

Answer 5

遇到同样问题，后来发现根本不需要再配置这些了
build/webpack.base.conf.js 中注意这一行：

module：{
 rules：[
  {
   test: /\.vue$/,
   loader: 'vue-loader',
   options: vueLoaderConfig // vueLoaderConfig
  },
 ]
}

其实vue-cli中已经完全配置好提取CSS到单独文件了
具体配置可以查看文件 build/vue-loader.conf.js 中

使用时直接在.vue 文件中@import就好了

<style>
@import './assets/css/base.css';
// 
</style>

这里用link的时候 除了路径问题外 style标签下的样式也会无效，具体为什么还不清楚

Answer 6

假如是webpack2的话，不能简写，应该这么写` {

    test: /\.css$/,
    loader: 'style-loader!css-loader'
}

]`