问题标签 [css-import]

我有一个包含 css、字体、js 等的网页——这些文件调用其他文件。

如果我使用 netlog.js phantomjs 示例，所有文件都被成功请求（即收到响应）。

如果我使用我的公司脚本（1000 行），我不会得到字体文件。

当我查看 netlog.js 输出时，丢失的文件是最后收到的，但它是 9 个请求中的第 4 个 - 这意味着我可以看到它是第 4 个请求但响应 (page.onResourceRecieved) 没有开始直到所有其他人都回来之后。

当我查看公司脚本时，根本没有请求丢失的文件 - 因此它丢失了。有人如何对 phantomjs 进行错误编程以忽略此文件，以免被请求？我认为这是我正在寻找的错误。

如果 HTML/CSS 是罪魁祸首，我将把它包括在下面。

我有一个 html 页面，其中包含一个通过样式标记的 css 文件（下面的部分标记）

1.css？请求已正确处理，并且还请求下一次导入 css?family。第二个导入的网址请求另一个文件： http://fonts.gstatic.com/l/font?kit=IQHow_FEYlDC4Gzy_m8fcqJ_SlhcvGEAn8FM2hC_Gzi8FMKbpN1MIaqg2HOsKpgsB-MyxXR1frCnhD4ZhVnHAATo_LDfaGo7fRovcW5LQvM& skey=11a939c399e8c9fe

netlog.js 会接收 fonts.gstatic.com 请求——即使它在完成其他所有操作后才返回。公司脚本没有弄清楚它需要请求 fonts.gstatic.com。

Netlog 是非常基本的——它不会混淆时间、标题或事件。我认为公司脚本正在做一些事情来停止对 fonts.gstatic.com 的请求，一旦幻象通过某些设置或事件发现它，但我不知道从哪里开始。

我的代码中有以下行，试图将样式加载到 iFrame 中：

有两个问题：

1. 是否可以像我在上面尝试做的那样使用@import导入代码
2. 我浏览器中的 html 代码输出以下内容：<iframe style="color:blue;margin-left:30px;@import(" ..="" custom="" courses="" css="" stylesheets="" course.css');</iframe> 所以，我的 css url 路径非常混乱。

更新

我的代码：

iframe上的代码无法生效

如何@import在 chrome 扩展中使用 css？我已经尝试了下面的代码，但我无法让它工作

省略了一些代码，因此更易于阅读

文件结构

代码

清单.json

}

_import.css

主题-blue.css

主题-黄色.css

主题-green.css

例如，我使用具有样式定义的第 3 方库，就像background: url(img/blue.png)它的 css 文件中一样。当 Brunch 将所有文件连接在一起并将输出文件放入公用文件夹时，此 URL 不再起作用，因为它仍然具有相对路径。并且浏览器在尝试加载此图像时出现 404 错误。是否有任何插件或类似的东西可以自动替换样式表的 url()/import() 指令中的相对路径？

我想在 CSS 文件中设置一个包含我所有图片的基本域，这是我尝试过的：

全局.css

s1.css

并在 html 中加载 s1.css

HTML 的背景颜色确实发生了变化，但没有显示背景。所以我尝试了其他方式：

全局.css

s1.css

没有帮助

仅在我为图像设置完整 URL 时有效，如下所示：

全局.css

s1.css

但这不是我想要的……可以在“背景”中使用 css 变量吗？

我正在开发基于反应的 nextjs 应用程序。一些 npm 包使用外部 css 导入。我收到类似的错误

如何在我的 nextjs 应用程序中支持从外部包导入 css。我通过在 next.config.js 中进行更改来检查某处，它可以工作。但是我找不到合适的。如果有人可以帮助我解决这个问题，那就太好了。

在这里反应初学者。我的应用程序使用 create-react-app，并且我正在使用react-slick进行轮播。我正在尝试按照 react-slick 设置中提供的说明进行操作，但以下内容对我不起作用：

@import "~slick-carousel/slick/slick.css"; @import "~slick-carousel/slick/slick-theme.css";

我收到以下错误：

./src/components/Homepage.scss Module not found: Can't resolve '~slick-carousel/slick/slick.css' in '/Users/simon/Dev/frischideas/site-new/src/components'

如果我将 css 从 CDN 添加到 index.html，它会起作用，但我宁愿避免该网络调用，因为我相信它会影响初始加载时页面的呈现。

我尝试按照配置 create-react-app 以使用相对路径的说明进行操作，但这对我也不起作用。也许我完全误解了，但我认为 ~ 符号可以让我从 /node_modules 中的包中导入 scss。

任何建议/澄清将不胜感激。

更新：从我的 webpack.config 文件中添加设置（其中大部分是 create-react-app 的默认设置）。

上面的代码显示以下错误：

但是，如果我将路径更改为无效的内容：

现在我看到“无法解析文件”以及未解析的变量。这是一个错误还是我做错了什么？

以下是相关文件的文件夹结构：

我使用 Angular Material 6 创建了一个自定义主题。当我在 styles.css 中导入主题时，出现错误：

./src/styles.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/styles.css) 模块构建失败：错误：无法解析'@angular 'C:\Users\D3L1ghT\Documents\PROJECTS\social-network\techhub\src' 中的 /material/theming'

这是我的 my-theme.scss 代码：

这是styles.css的代码：

这是 angular.json 的截图：angular.json

在我最近努力理解、维护和添加使用 Jekyll 构建的现有网站的功能时，我发布了一些问题（参见this和this）。

我在主页上添加了一个js 滑块插件。滑块附带的 CSS 文件已添加到文件夹：'/assets/'

然后在 '_assets/css/app.scss'sass文件中导入：@import "flexslider.css;

现在一切都在浏览器中运行良好，包括最新的 Firefox、Chrome、Opera 和 Edge 至版本 16。Edge 17（最新）正在通过消息标记错误：

SEC7136: The origin 'http://staging.whatever.com' failed an integrity check for a style resource 'http://staging.whatever.com/assets/flexslider.css'

我不明白为什么Edge 17会是唯一一个标记这个以及完整性检查的全部内容，它似乎与某种安全检查失败有关。

我的主要问题是，上述在 jekyll 项目中附加 CSS 文件的方法是否正确？是否有在项目中导入 css 文件的推荐方法？