先以下的 css 的处理我们都把 mode 设置为 production。

webpack4 开始使用: mini-css-extract-plugin插件, 1-3 的版本可以用: extract-text-webpack-plugin

抽取了样式,就不能再用 style-loader注入到 html 中了。

npm install --save-dev mini-css-extract-plugin

再次运行打包:

在 dist 目录中已经把 css 抽取到单独的一个 css 文件中了。修改 html,引入此 css 就能看到结果了。

注意: 此时会报错: Error: No PostCSS Config found in...

 

webpack 样式表抽离成专门的单独文件并且设置版本号的更多相关文章

  1. CSS 层叠及样式表来源

    Web标准化运动的口号——分离.分离.分离. 在2003年的 SXSW 会议中, Steve Champeon 和 Nick Finck 做了一个名为“面向未来的全方位 Web 设计”的演讲,揭示了这 ...

  2. 【转】QT样式表 (QStyleSheet)

    作者:刘旭晖 Raymond 转载请注明出处Email:colorant@163.comBLOG:http://blog.csdn.net/colorant/ 除了子类化Style类,使用QT样式表( ...

  3. CSS级联样式表-css选择器

    CSS概念 Cascading Style sheet 级联样式表 表现HTMl或XHTML文件样式的计算机语言 包括对字体,颜色,边距,高度,宽度,背景图片,网页定位等设定 建议:把表示样式的代码从 ...

  4. QT样式表

    QT样式表 一.QT样式表简介 1.QT样式表简介 QSS的主要功能是使界面的表现与界面的元素分离,使得设计皮肤与界面控件分离的软件成为可能. QT样式表是允许用户定制widgets组件外观的强大机制 ...

  5. CSS中的层叠、特殊性、继承、样式表中的@import

    CSS中的层叠.特殊性.继承.样式表中的@import 层叠 CSS有一个机制是层叠,层叠可以理解为对样式的覆盖,优先性为: 网站开发者的样式表 用户样式(通过设置浏览器的显示选项) 浏览器默认的样式 ...

  6. Qt样式表——选择器详解(父子关系)

    在上一节中,小豆君给大家介绍了样式表的基本概念和大致用法.今天我们来详细了解下样式表中选择器的用法. 所谓选择器,就是指定你所设置的样式对哪个或哪些控件起作用. 到目前为止,Qt样式表支持CSS2中定 ...

  7. 0811 css样式表基本

    CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 1. 样式表分类 ①内联样式表 和html联合显示,控制精确,但是可重用性差 ...

  8. 在网页中插入CSS样式表的几种方法

    1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head> ...

  9. Qt中设置widget背景颜色/图片的注意事项(使用样式表 setStyleSheet())

    在Qt中设置widget背景颜色或者图片方法很多种:重写paintEvent() , 调色板QPalette , 样式表setStyleSheet等等. 但是各种方法都有其注意事项,如果不注意则很容易 ...

随机推荐

  1. WebWorker 简单使用方式

    WebWorker 一定程度上可以算得上是浏览器中的多线程技术了,在项目中适当使用 Worker 来做一些耗时的操作能大大提高页面整体流畅度. Worker的使用也是非常简单的,通过向 Worker ...

  2. 【野草】SQL Server之索引解析(一)

    1.写在前面 微软专门给出SQL Server设计思路及实现路线,从7大体系结构阐述是如何实现,通过了解这些,我们就可以总结出数据库设计原则.编程中sql写法及注意事项,从而优化我们的系统性能,本系列 ...

  3. UiPath实践经验总结(二)

    1.       UI操作容易受到各种意外的干扰,因此应该缩短UI操作阶段的总体时间.而为了缩短UI操作阶段的总体时间,应该将UI操作尽量放在一起,将后台的各种操作尽量放在UI操作的前后.例如,现在有 ...

  4. linux用curl发送post请求

    1.curl -X POST “http://XXXXXXX”这种请求方式参数直接写在URL里面的,而不是body

  5. July 04th. 2018, Week 27th. Wednesday

    And if you really want to see what people are, all you have to do is to look. 想真正了解他人,只需要用心看. From W ...

  6. 还在用NuGet吗?大哥FuGet了解一下

    前言 你可能不知道是,NuGet已经发布10年了,从 Visual Studio 2010 第一次官方集成NuGet以来,这10年间有聚集了超过 14万 的包,这些包有超过 150万 的版本提供,大约 ...

  7. ReactiveSwift源码解析(六) SignalProtocol的take(first)与collect()延展实现

    上篇博客我们聊了observe().map().filter()延展函数的具体实现方式以及使用方式.我们在之前的博客中已经聊过,Signal的主要功能是位于SignalProtocol的协议延展中的, ...

  8. emscripten、 WebAssembly,传递字符串给c函数

    下面看具体的实例. 下面的代码是一个C函数,实现简单的字符串拼接,然后返回拼接的字符串. #include <stdio.h> #include <string>  char* ...

  9. PHP获取远程http或ftp文件的md5值

    PHP获取本地文件的md5值: md5_file("/path/to/file.png"); PHP获取远程http文件的md5值: md5_file("https:// ...

  10. Pandas学习笔记

    本学习笔记来自于莫烦Python,原视频链接 一.Pandas基本介绍和使用 Series数据结构:索引在左,值在右 import pandas as pd import numpy as np s ...