webpack react 单独打包 CSS

webpack react 单独打包 CSS

webpack react 单独打包 CSS

webpack require css的方法,默认会把css 打入到js文件中,加载顺序有问题,如果需要打出独立的css文件

操作步骤:

step1:

安装 webpack plugin 插件

npm install extract-text-webpack-plugin --save

step2:

修改 webpack.config.js 配置

引用plugin

var ExtractTextPlugin = require("extract-text-webpack-plugin");

config的module 中:

{ test: /\.less$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader","less-loader") }, 

最后plugins添加

plugins: [ new ExtractTextPlugin("./css/[name][hash:8].css") ] 

问题

Q: Module build failed: ReferenceError: window is not defined.

A: 修改loader

错误示范: loader: ExtractTextPlugin.extract("style-loader!css-loader!less-loader")

正确示范: loader: ExtractTextPlugin.extract("style-loader", "css-loader","less-loader")

参考文章: 

1. https://webpack.github.io/docs/stylesheets.html

2. http://stackoverflow.com/questions/28223040/window-not-defined-error-when-using-extract-text-webpack-plugin-react

 

 

转载于:https://www.cnblogs.com/zhongxia/p/5443043.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/109048.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • centos7 防火墙开放svn通过

    centos7 防火墙开放svn通过

    2022年3月8日
    43
  • idea2021通用激活码【2021.7最新】[通俗易懂]

    (idea2021通用激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~MLZPB5EL5Q-eyJsaWNlb…

    2022年3月21日
    69
  • navicat15.0.25激活码【2021最新】

    (navicat15.0.25激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.htmlS32PGH0SQB-eyJsaWN…

    2022年3月25日
    115
  • OpenCV论道:为什么我的伽马校正函数只有一行?[通俗易懂]

    OpenCV论道:为什么我的伽马校正函数只有一行?[通俗易懂]最近在用OpenCV识别棋盘棋子,基本的思路是这样的:先转灰度,再做高斯模糊和二值化,此时棋盘格上有的有棋子,有的无棋子;通过迭代腐蚀,消去棋子,再迭代膨胀回来,就得到了一个纯净的棋盘;识别棋盘,标定位置,对原图做透视变换、仿射变换,得到矩形棋盘;利用霍夫圆形检测或轮廓检测取得棋子;借助于机器学习识别棋子,最终得到对弈局面。

    2022年9月16日
    3
  • Java| 编译和反编译

    Java| 编译和反编译原文链接:http://www.yveshe.com/articles/2018/05/01/1525172129089.html什么是编程语言?在介绍编译和反编译之前,我们先来简单介绍下编程语言(ProgrammingLanguage)。编程语言(ProgrammingLanguage)分为低级语言(Low-levelLanguage)和高级语言(High-levelLa…

    2022年6月10日
    43
  • Linux安装RabbitMQ[通俗易懂]

    CentOSrelease6.6,python,erlang,rabbitmq

    2022年4月9日
    62

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号