前言
在前端开发中，样式的管理是一个非常重要的工作。在一个较大的项目中，样式文件往往会变得十分庞大，难以维护。此时，我们可以使用 neutrino-preset-extractstyles 这个 npm 包来帮助我们自动将样式文件分离出来，从而更好地维护项目。
什么是 neutrino-preset-extractstyles？
neutrino-preset-extractstyles 是一个基于 neutrino 的 neutrino-preset-css 和 webpack 插件 extract-text-webpack-plugin 的 npm 包。它可以自动将样式文件提取出来，从而使得样式文件与 JavaScript 文件分离，方便维护。
如何使用 neutrino-preset-extractstyles？
安装
使用 npm 安装：
npm install --save-dev neutrino-preset-extractstyles
配置
在项目根目录下创建一个名为 .neutrinorc.js 的文件，并写入以下代码：
module.exports = {
use: [
['neutrino-preset-extractstyles', {
stylePaths: ['src/styles/main.css']
}]
]
};这个配置文件是通过 neutrino 来配置的。我们只需要将 neutrino-preset-extractstyles 添加到 use 中，并设置 stylePaths 参数来指定提取样式的路径。
示例
在一个示例项目中，我们可以模仿下面的样式文件：
-- -------------------- ---- ------- -- --------------------- -- ---- - ---------- ----- ------ ----- - - - ------ ----- -
-- -------------------- ---- -------
-- ------------------- --
------- ---------------
------- -
----------------- -----
------- --- ----- -----
-------- -----
-
----- -
-------- -------------
-------- ----
------------- ----
----------------- --------
------- --- ----- -----
------- -
----------------- -----
-
-然后，在我们的 HTML 文件中引入提取出来的样式文件：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------------------ ----------
----- ---------------- ------------------
-------
------
---- ---------------
-- ------------ ------------- -----
-- ------------ ------------- -----
-- ------------ ------------- -----
------
-------
-------最后，我们运行 npm run build，就会在 dist 目录下生成一个 styles.css 文件，其中存储了我们提取出来的样式：
-- -------------------- ---- ------- -- --------------- -- ---- - ---------- ----- ------ ----- - - - ------ ----- - ------- - ----------------- ----- ------- --- ----- ----- -------- ----- - ----- - -------- ------------- -------- ---- ------------- ---- ----------------- -------- ------- --- ----- ----- - ----------- - ----------------- ----- -
总结
通过使用 neutrino-preset-extractstyles，我们可以自动将样式文件提取出来，从而使得项目更易于维护。在配置中，我们只需要设置 stylePaths 参数即可指定要提取的样式文件路径。最后，我们可以在 HTML 文件中引用提取出来的样式文件，从而应用样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600564ee81e8991b448e18f9