webpack配置css相关loader注意先后顺序

一、问题描述

在webpack3中，引入animate.css失败。



二、问题分析

1、难道是入口main.js引用方式不对？

import animate from 'animate.css'

2、难道是postcss配置文件不对？

//postcss.config.js
module.exports = {
plugins: [
require('precss'),
require('autoprefixer')
]
}

3、难道是webpack配置文件不对？

//webpack.dev.config.js
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } } ,
'postcss-loader'
]

是的，这里一开始把loader顺序写反了，正确的顺序应该像上面这样写。

4、但是还是报错啊。。。

难道是webpack热模块替换产生的缓存？是的，我重新编译一下，就好了。

三、解决方案

1、配置webpack文件时，注意loader先后顺序；

2、如果方法都试了，再看看是否电脑缓存问题。