Javascript 在网页包中使用内联导入缩小css_Javascript_Reactjs_Webpack_Import

Javascript 在网页包中使用内联导入缩小css

javascript reactjs webpack import

Javascript 在网页包中使用内联导入缩小css,javascript,reactjs,webpack,import,Javascript,Reactjs,Webpack,Import,我们有很多页面和样式表。我们希望在某些组件上内联一些关键样式，以避免网络请求；我通过在webpack4中使用样式加载器达到了要求，如下所示：从“React”导入React；导入“/style.sass”；从“组件/UIkit/FancyButton”导入FancyButton； to:（！！开头将禁用所有配置的装载机）从“React”导入React；导入“！！样式加载器！css加载器！sass加载器！/style.sass”；从“组件/UIkit/FancyButton”导入Fan

我们有很多页面和样式表。我们希望在某些组件上内联一些关键样式，以避免网络请求；我通过在

webpack4

中使用

样式加载器

达到了要求，如下所示：

从“React”导入React；
导入“/style.sass”；
从“组件/UIkit/FancyButton”导入FancyButton；

to:（

！！

开头将禁用所有配置的装载机）

从“React”导入React；
导入“！！样式加载器！css加载器！sass加载器！/style.sass”；
从“组件/UIkit/FancyButton”导入FancyButton；

这可以很好地工作，并将

scss

注入

标记中但中的将不会缩小

css

。我也需要一种缩小它们的方法；最好使用内联导入命令、魔术注释或类似的内容：

！样式加载器！需要（'mini-css-extract-plugin'）。加载器！css加载器！少装/无风格

我们的

webpack

config被弹出版本

create react app

，只需稍加修改即可满足我们的需求。对于正常的

导入

来说，它工作得非常好；并使用

MiniCssExtractPlugin

缩小所有

css

s。但是内联导入不会遵循默认管道，因此不会缩小

我也欢迎其他关于内联批评风格的建议；（考虑它们可以是

.scss

，

.less

，

.module.scss

）除此之外：