How do i include only one CSS file in the html head when I import multiple .scss files?(当我导入多个.scss文件时,如何在html头中只包含一个css文件?)
问题描述
我的网站结构看起来有点像
src/
components/
Footer/
index.jsx
style.scss
Header/
index.jsx
style.scss
Navbar/
index.jsx
style.scss
...
在我的每个index.jsx
文件中,我都有import './style.scss'
。
在我最近开发的Gatsby website中,我只能看到头部有一个样式标签,尽管我可能有几十个组件包含import ./style.scss
。
我现在正在开发一个非Gatsby,Reaction;webpack网站,当我的组件很多时候包含import ./style.scss
时,使用相同的方法,但看起来每个导入的样式文件都有一个样式标记。
我想知道Gatsby是做什么的,以及如何在我的非Gatsby网站中包含相同的功能
推荐答案
此工作由webpack完成,而不是由盖茨比完成。当然,Gatsby扩展自定义实现,但您可以通过添加自定义webpack配置(as you can do in Gatsby as well)将相同的行为导入到另一个项目中。
webpack使用code-splitting technique捆绑了所有的JSON、JSON和css(默认不支持scss,应该通过添加一个自定义的webpack的配置或通过插件来实现)文件。这允许您将代码分散到根据需要或请求加载的几个捆绑包中。
此外,可能对您有用的一件事是使用主文件来收集一些导入。给定:
src/
components/
Footer/
index.jsx
style.scss
Header/
index.jsx
style.scss
Navbar/
index.jsx
style.scss
您可以在/src/styles
下创建名为styles.scss
和:
@import 'components/Footer/style';
@import 'components/Header/style';
@import 'components/Navbar/style';
然后将该文件导入包含其他组件的顶级组件中。
更新:
您所说的警告是由于错误的输入order in styles。这并不重要,因为webpack破坏了所有这些风格,但它们创造了一个警告。有一个名为ignoreOrder
的属性(默认设置为false
)。您可以通过以下方式进行修复:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
ignoreOrder: true, // here
}),
],
module: {
rules: [
{
test: /.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
这篇关于当我导入多个.scss文件时,如何在html头中只包含一个css文件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:当我导入多个.scss文件时,如何在html头中只包含一个css文件?


- 失败的 Canvas 360 jquery 插件 2022-01-01
- 400或500级别的HTTP响应 2022-01-01
- Quasar 2+Apollo:错误:找不到ID为默认的Apollo客户端。如果您在组件设置之外,请使用ProvideApolloClient() 2022-01-01
- CSS媒体查询(最大高度)不起作用,但为什么? 2022-01-01
- Fetch API 如何获取响应体? 2022-01-01
- 如何使用 JSON 格式的 jQuery AJAX 从 .cfm 页面输出查 2022-01-01
- Css:将嵌套元素定位在父元素边界之外一点 2022-09-07
- Flexslider 箭头未正确显示 2022-01-01
- 使用RSelum从网站(报纸档案)中抓取多个网页 2022-09-06
- addEventListener 在 IE 11 中不起作用 2022-01-01