webpack4 初体验-资源管理-加载CSS

继续上一篇博文[webpack4 初体验]

加载 CSS

为了从 JavaScript 模块中 import 一个 CSS 文件,你需要在 module 配置中 安装并添加 style-loader 和 css-loader:

webpack 根据正则表达式,来确定应该查找哪些文件,并将其提供给指定的 loader。在这种情况下,以 .css 结尾的全部文件,都将被提供给 style-loader 和 css-loader。

这使你可以在依赖于此样式的文件中 import './index.css'。现在,当该模块运行时,含有 CSS 字符串的 标签,将被插入到 html 文件的 中。

我们尝试一下,通过在项目中添加一个新的 index.css 文件,并将其导入到我们的 index.js 中:

项目目录结构

src/style.css

src/index.js

现在运行构建命令:

再次在浏览器中打开 index.html,你应该看到 Hello webpack 现在的样式是红色。要查看 webpack 做了什么,请检查页面(不要查看页面源代码,因为它不会显示结果),并查看页面的 head 标签。它应该包含我们在 index.js 中导入的 style 块元素。

请注意,在多数情况下,你也可以进行 CSS 分离,以便在生产环境中节省加载时间。最重要的是,现有的 loader 可以支持任何你可以想到的 CSS 处理器风格 - postcss, sass 和 less 等。

项目地址

https://github.com/durban89/webpack4-demo.git

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180602G08RPJ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券