什么是 css-modulesify-plus
css-modulesify-plus 是一个基于浏览器ify的 npm 包，提供了一种方便的方式来在前端项目中使用 css modules。它具有以下特点：
- 可以生成 css modules 的类名
- 可以将 css modules 打包到 JavaScript bundle 中
- 可以支持 sass 和 less
安装和使用
首先，你需要切换到你的前端项目的根目录，然后使用 npm 进行安装：
npm install css-modulesify-plus --save
接着，在你的 JavaScript 文件中使用 browserify 来打包你的代码，并在 css 代码中使用 css modules。
// index.js
var css = require('./style.css');
console.log(css.a);
// style.css
.a {
color: red;
}在上述示例中，我们使用 require 来引入了一个 css 文件，并在 JavaScript 中使用其导出的模块。
接下来，我们需要在 browserify 中使用 css-modulesify-plus 来将 css 模块打包到 JavaScript bundle 中。我们可以通过以下方式使用：
browserify -t [ css-modulesify-plus { extensions: [ '.css', '.scss', '.less' ] } ] index.js -o bundle.js在上述命令中，我们使用了 css-modulesify-plus 的 extensions 选项来支持 sass 和 less，以便将这些类型的文件编译为 css modules。
打开生成的 bundle.js 文件，你会发现 css class 名已被编译成了一个独一无二的哈希值。例如，你的 .a 类可能被转化成类似于 .a_1ehjh2 的类名。
最后，在你的 HTML 页面中，引入生成的 bundle.js 文件，并使用这些生成的类名来应用样式。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- ----------- ----- ---------------- ----------------- ------- ------ ---- ---------------------- ----------- ------- -------
使用 sass 和 less
css-modulesify-plus 提供了对 sass 和 less 的支持。你只需要在安装了 sass 或 less 的前提下，将扩展名添加到 extensions 数组中即可。
这里是一个使用 sass 的例子：
npm install sass --save-dev
// index.js
var css = require('./style.scss');
console.log(css.a);
// style.scss
.a {
color: red;
}browserify -t [ css-modulesify-plus { extensions: [ '.css', '.scss' ] } ] index.js -o bundle.js在上述代码中，我们删除了从 style.css 文件中引入的样式，而是改为从 style.scss 文件中引入，并将 .css 扩展名添加到了 extensions 数组中。
同样地，你也可以使用 less 文件。
结语
在这篇文章中，我们介绍了使用 css-modulesify-plus 作为在前端项目中使用 css modules 的便捷工具。我们讲解了如何安装和使用它，并提供了一个使用 sass 的示例。使用 css modules 可以帮助我们更好地组织样式，增强代码重用性，并防止类名冲突。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8581e8991b448d91f3