webpack-demo

开源

CSS 模块的演示,使用 Webpack 的 css-loader 模块模式

1.5K stars0 点赞1 次浏览

工具介绍

CSS 模块的演示,使用 Webpack 的 css-loader 模块模式

[CSS Modules] 的一个工作演示,使用 [Webpack] 中的 [css-loader] 在 [模块模式] 中。

bash

$ npm install
$ npm start & open http://localhost:8080

在该项目的 package.json 文件中,您会发现许多用于此示例应用程序的 npm 模块。由于并非所有模块都需要实际的 CSS 模块功能, 我们编制了以下列表来描述它们的用途。 必需模块 以下模块是真正需要的唯一模块,可用于开始使用 CSS 模块:

模块	描述
[Webpack]	Webpack（当然了…）
[webpack-dev-server]	（可选）在开发过程中支持热加载已更改的文件等功能。
[style-loader] 和 [css-loader]	`style-loader` 和 `css-loader` 会处理您的 CSS 文件。`css-loader` 是使 [CSS 模块] 正常工作的加载器。

模块	描述
postcss-loader	在 Webpack 中执行各种 CSS 后处理器。对于 `autoprefixer-core` 和 `postcss-color-rebeccapurple` 都是必需的。
autoprefixer-core	为您的 CSS 代码添加 vendor 前缀（根据 GitHub 页面，它已被弃用，应由 autoprefixer 取代）。
postcss-color-rebeccapurple	另一个 CSS 后处理器。仅用于支持 CSS 中的 `rebeccapurple` 颜色。
extract-text-webpack-plugin	将 Webpack 处理的 CSS 代码写入一个独立的 CSS 文件。