Question

我们的应用程序中有一些自定义样式定义。目前，所有开发人员都在为app.css添加样式。但我们不想把它变成一个巨大的文件。而且我们也不想弄乱风格类。

我们如何将自定义样式放在我们的应用程序上？有最好的做法吗？（欢迎所有指南/文件参考。）

还有第二个问题：是否有地方可以放置特定路线或组件的样式？

更新：更具体地说，我想将以下样式仅应用于特定路线或组件：

body {
  font-size: 13px;
}
table {
  table-layout: fixed;
}

Answer 1

CSS文件的组织是相当主观的。很多人有不同的方法。这是一种适合我的方法。请注意，我使用的是ember-cli-sass。

应用/风格/ app.scss

@import "defaults/variables"; @import "defaults/typography"; // etc... @import "components/buttons"; @import "components/modals"; // etc... @import "sections/about"; @import "sections/home"; // etc...

上面列出的所有文件都将被视为＆＃34; partials＆＃34;，因此文件名将以下划线为前缀：

├── app.scss ├── defaults │ ├── _typography.scss │ └── _variables.scss ├── components │ ├── _buttons.scss │ ├── _modals.scss │ └── _my-specific-component.scss └── sections ├── _about.scss └── _home.scss

＆＃34;默认＆＃34;样式表旨在提供适用于整个应用程序的通用样式。这通常包括CSS重置样式。

＆＃34;部分＆＃34;样式表应用特定于某些页面的样式。在模板中，通常有某种包装元素，其ID或类对于该页/节是唯一的。

<section id="home"> <h1>Welcome to my homepage</h1> <section>

最后，＆＃34;组件＆＃34;样式表应用特定于组件类型的样式。其中一些是针对各种通用按钮样式的，而另一些是非常具体的。

Answer 2

您可以将css文件添加到app/styles/目录。

示例：

app/styles/app.css

Answer 3

对于您的组件，ember-component-css接近完美，对于您的路线，我回应了Kitler所说的，使用像sass / less这样的预处理器将帮助您为与您的应用匹配的样式创建文件夹结构。

你可以用

做到这一点

中的app.scss / .less / .styl文件

// app/styles/app.scss

@import 'routes/lovelanguage';

以下是所有预处理器的链接：

在Ember.js中放置CSS文件的位置？

3 个答案: