主要的CSS文件在.less文件编译过程中损坏了。

huangapple go评论55阅读模式
英文:

Main CSS file got corrupted during .less files compilation

问题

在 VS 项目中,我们有 3 个文件。

fonts.less:此文件包含如下示例所示的字体

@font-face{
    font-family: "Trade Gothic Next";
    src: url("/assets/example.eot");
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    .custom-font();
}

utility.less:此文件包含一些函数。以下是一个示例函数

.custom-font() {
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    &:before {
        position: relative;
    }
}

app.less:这是主要的应用程序 less 文件,其中包含所有 .less 文件的引用,如下所示

// 全局应用程序样式
@import "utility.less";
@import "fonts.less";
以及其他...

app.css:这是主要的应用程序文件。由于我们安装了 Bundling 和 Minification 以及 Web Compiler VS 扩展,因此在保存任何 .less 文件时,所有 .less 文件都会被编译,并且最终的 CSS 输出会生成在 app.css 文件中。根据 Bundling 和 Minification 配置,还会创建 app.min.css 文件,但由于在 app.css 文件中生成的代码不正确,这导致了 minification 失败。在分析时,我们发现 app.css 中的以下代码似乎是 minification 失败的原因。

@font-face {
    font-family: "Trade Gothic Next";
    src: url("/assets/example.eot");
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    : before
    {
        position: relative;
    }
}

在 fonts.less 文件的所有 @font-face 部分中进行了以下更改。通过这种方式,minification 就能正常工作了。在 minification 过程中,我没有遇到任何失败,但我不确定这是否是正确的方法。我也找不到在网站上验证此更改的方式

@font-face{
    font-family: "Trade Gothic Next";
    src: url("/assets/example.eot");
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}:before {
  position: relative;
}
英文:

In VS project we have 3 files.

fonts.less: This file contains fonts as shown in below example

@font-face{
	font-family: "Trade Gothic Next";
	src: url("/assets/example.eot");
	font-weight: 400;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	.custom-font();
}

utility.less: This file contains some functions. One function as an example is given below

.custom-font() {
	font-smooth: always;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	&:before {
		position: relative;
	}
}

app.less: This is main app less file which contains reference of all .less files with @import as shown below

// Global App Styles
@import "utility.less";
@import "fonts.less";
and so on ...

app.css: This is main app file. Since we have installed Bundling and Minification and Web Compiler VS extension so while saving any .less file, all .less file are complied and final CSS output is produced in app.css file. Further based on Bundling and Minification configuration, app.min.css file is being created but this minification process is failing due to incorrect code generated in app.css file. While analyzing we found below code in app.css seems to be the reason of minification failure.

@font-face {
    font-family: "Trade Gothic Next";
    src: url("/assets/example.eot");
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    : before

{
    position: relative;
}

Code written in .custom-font() function is incorrectly placed in app.css file. Is there any alternate way to write this code without any impact on end user experience?

---Update 1:---

I made below change in all @font-face section in fonts.less file. With this minification is working properly. I'm not getting any failure during minification process but I'm not sure if this is right approach. I couldn't find any way to validate this change on website as well

@font-face{
    font-family: "Trade Gothic Next";
    src: url("/assets/example.eot");
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}:before {
  position: relative;
}

答案1

得分: 2

@font-face 不选择任何 DOM 节点,因此无法具有位置或 :before。因此,您的代码生成了无效的 CSS。请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule

英文:

@font-face doesn‘t select any dom node and can thus not have a position or :before. Your code therefore generates invalid css.
See https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule

huangapple
  • 本文由 发表于 2023年5月15日 10:52:49
  • 转载请务必保留本文链接:https://go.coder-hub.com/76250606.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定