webpack引入css报错

Question

    module: {
            loaders: [
                {test: /\.css$/, loader: 'style!css'}
            ]
   }
   上面是配置
   
   require('./index.css');
   这里是引入css文件

ERROR in ./entry.js
Module not found: Error: Can't resolve 'style' in '/Users/zwf/MyBlog'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
You need to specify 'style-loader' instead of 'style'.
@ ./entry.js 3:0-22
这里是报错

求助

Answer 1

style改成style-loader

Answer 2

module: {

        loaders: [
            {test: /\.css$/, loader: 'style-loader!css-loader'}//2.0貌似不支持缩写了
        ]

}

Answer 3

今天弄了下webpack，看了官方文档，按着文档敲都有问题，问题主要是webpack的版本问题。后来发现这篇挺不错的，可以试试。

Answer 4

应该是版本的问题，早前的版本都是可以直接

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

但是现在的版本就不能这么写，可能是为了规范吧。
现在的写法是

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

下次再出现报错，你可以尝试着翻译报错。这个报错已经提示你了，不能少了'-loader'后缀哦。