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、如果方法都试了，再看看是否电脑缓存问题。

转载于:https://www.cnblogs.com/camille666/p/webpack_cssloader_order.html