空样式 (.css/.scss) 文件

Posted

技术标签:

【中文标题】空样式 (.css/.scss) 文件【英文标题】:Empty style (.css/.scss) files 【发布时间】:2019-08-23 09:49:18 【问题描述】:

当我创建 Angular 应用程序时,我使用 CLI 来生成组件。在开发应用程序一段时间后,我为每个组件都有样式文件,但其中大部分是空的。

当我检查声纳时,我在空样式文件中有代码气味:

删除此空样式表。 在此文件末尾添加一个空的新行。

我应该删除声纳规则,还是必须删除项目中的所有空样式文件并在需要它们用于组件样式时在项目的下一个版本中重新创建它们?什么是最佳做法?

【问题讨论】:

【参考方案1】:

主要问题是:空的 scss 文件...什么是最佳做法

项目中的空文件是一种不好的做法。 没有人喜欢在他们的文件浏览器中有无用的文件。

我反对@AbhishekAnand answer“编译器会自己解决你的问题”:

编译器没有解决我的问题,空文件更丑陋,我仍然无法说出缩小空文件的好处。

我的意见是把component中的“styleUrls”去掉,把空的scss删掉,需要的时候再创建。

感觉就像你只是减肥一样好!

【讨论】:

【参考方案2】:

对我来说,你可以让 CSS / SCSS 文件为空。 只是因为在构建之后,围绕样式的所有内容都将被缩小并包含“styles.js”文件。 所以,即使在开发模式下看到所有这些空文件有点难看,编译器也会自己解决你的问题

这是构建后项目的屏幕:

【讨论】:

这属于声纳的主要问题,尽管rules.sonarsource.com/css/RSPEC-4667 @AbhishekAnand 是的,但请记住,空文件是预构建的。在构建过程中,webpack 会将样式合并到一个或两个文件中(顺便说一下 js 文件)。所以在你的 Angular 项目中保留空样式实际上不是问题。 同意。这就是我的意思,这很奇怪。这只是表明声纳专业没有意义

以上是关于空样式 (.css/.scss) 文件的主要内容,如果未能解决你的问题,请参考以下文章

在 React 组件中使用 css/scss 变量作为内联样式

如何将 SCSS 样式添加到 React 项目?

SASS中LESS的“导入(引用)'样式'”相当于啥

Angular 初始化项目后,如何把默认的 .css 文件修改为 .scss 文件?

CSS/SCSS 媒体查询或类

Rails 脚手架 scss 每次生成脚手架时都会重置