用于加载 css 的 webpack 文档:https ://webpack.js.org/guides/asset-management/#loading-css1
webpack 文档要求从 Javascript 代码导入 CSS 文件,然后运行 extract-text-webpack-plugin 来提取 CSS。
--> 使用 webpack,为什么要从 JS 源代码中导入 CSS 文件,而不是像传统那样孤立地构建 CSS?
不从 Javascript 导入 CSS,我的意思是 CSS 的 webpack 配置没有“.js”扩展名,它直接解析 CSS/SCSS 文件。
不从 javascript 导入 CSS 有以下好处:
(客观事实)。如果只想构建 CSS,如果 bundler 不需要解析 Javascript 源代码会更快。此外,可以使用 parallel-webpack 并行运行 CSS 和 Javscript 的打包器。
(主观,基于传统,但在我看来最重要)。多年来,SASS 独立构建一直是传统。因此,我们可以实现更好的 HTML 语义和可维护性。从 JS 导入 CSS 是虚拟的,可能会导致忽略生成的单独 CSS 包。
(客观事实)为了更清晰,可以为 CSS 和 Javascript 拆分更多配置文件。