问答详情
源自：2-2 webpack配置项目加载各种静态资源及css预处理器

style-loader必须放在css-loader之前吗？为什么？


刚开始 

{test:/\.css$/, use: ['css-loader','style-loader']},

运行：npm run build,会报错：

https://img2.mukewang.com/5abb532d0001734505830227.jpg

改成style-loader就正常了：

{test:/\.css$/, use: ['style-loader', 'css-loader']},


提问者：蓝with黑 2018-03-28 16:36

个回答

  • qq_覗水翛_0
    2018-03-29 12:12:46
    已采纳

    loader的加载顺序是从右往左。这里的编译顺序是先用css-loader将css代码编译，再交给style-loader插入到网页里面去。所以css-loader在右，style-loader在左。

    1
  • 慕沐1599493
    2018-08-31 20:44:10

    为什么loader 的加载顺序是从右往左，虽然我也认为按道理也是先cssloader 后styleloader合理，可是哪里可以找到证明loader的加载顺序是从右往左，谢谢帮忙，文档即可

    0
  • 慕的地4297146
    2018-06-16 10:30:29

    css-loader以字符串形式读取CSS文件。

    style-loader获取这些样式并创建<style>页中的标记<head>包含这些样式的元素。


    0
  • 慕的地4297146
    2018-06-16 10:26:52

    style-loader是将外部css文件注入html文件中，最后将html文件中的css 用css-loader进行解析

    0
  • hhopeforlife
    2018-03-29 12:31:33

    上面正解。按照我的理解是这样的，因为css是放在style标签里面的，那么我们肯定是先将css代码编译之后再重新放入style标签里面。loader加载的顺序是规定的，是从右往左，所以style-loader要放在css-loader之前

    0