sass css文件_灰烬快速提示：如何分别分解和导入SASS / CSS文件

sass css文件

There are times when it’s desirable to break up your stylesheets into multiple files and import them into your project separately. This came up in a side project I started recently, and I thought y’all might benefit from what I came up with as a solution. It’s a quick and easy method, so let’s get started ?

有时需要将样式表分解为多个文件，然后分别将其导入到项目中 。这是我最近开始的一个副项目中提出的，我认为你们所有人都可以从我提出的解决方案中受益。这是一种快速简便的方法，所以让我们开始吧？

When you begin a new EmberJS app you’ll notice that the index.html file imports the main stylesheet into the app like so:

当您开始一个新的EmberJS应用程序时，您会注意到index.html文件将主样式表导入到应用程序中，如下所示：

<head>
 ...
 <link
  integrity=""
  rel="stylesheet"
  href="{{rootURL}}assets/test-app.css"
 >
 ...
</head>

test-app.css is compiled directly from your project. When we write our custom styles in app/styles/app.css they get put into this file.

test-app.css直接从您的项目中编译。当我们在app/styles/app.css编写自定义样式时，它们会放入此文件中。

Now, what if we don’t want to import all of our styles into the app as a single stylesheet? How can we breakup our styles and import multiple stylesheets into the app? Something like this:

现在，如果我们不想将所有样式作为一个样式表导入到应用程序中怎么办？ 我们如何才能拆分样式并将多个样式表导入应用程序？ 像这样：

<head>
 ...
 <link
  integrity=""
  rel="stylesheet"
  href="{{rootURL}}assets/test-app.css"
 >
 <link
  integrity=""
  rel="stylesheet"
  href="{{rootURL}}assets/second-stylesheet.css"
 >
...
</head>

It may be easier than you think 😏

可能比您想像的要容易😏

第一步：用SCSS / SASS编写样式并编译为CSS (Step One: Write styles in SCSS/SASS and compile to CSS)

First, install a SASS preprocessor to compile SCSS/SASS stylesheets into CSS stylesheets. For this example I’ll use ember-cli-sass:

首先，安装SASS预处理程序以将SCSS / SASS样式表编译为CSS样式表。在此示例中，我将使用ember-cli-sass ：

ember install ember-cli-sass

Now rename app/styles/app.css to app/styles/app.scss. The preprocessor will take care of processing and compiling your stylesheet automatically.

现在将app/styles/app.css重命名为app/styles/app.scss 。预处理器将负责自动处理和编译样式表。

If you run the app the Ember welcome page should display as usual:

如果您运行该应用程序，Ember欢迎页面应照常显示：

Comment out {{welcome-page}} in app/templates/application.hbs before you continue. We now have a blank DOM to work with.

在继续之前，请在app/templates/application.hbs注释掉{{welcome-page}} 。我们现在有一个空白的DOM可以使用。

第二步：创建一个新样式表 (Step Two: Create a new stylesheet)

Let’s create a new stylesheet called app/styles/second-stylesheet.scss and add the following styles:

让我们创建一个名为app/styles/second-stylesheet.scss的新样式app/styles/second-stylesheet.scss并添加以下样式：

body {
 width: 100vw;
 height: 100vh;
 background-color: red;
}

A glaring red background would be very obvious, yet when you run the server you see nothing but a sea of white. Why is this?

耀眼的红色背景将非常明显，但是当您运行服务器时，您只会看到白色的海洋。为什么是这样？

If your instinct was to import it into the project as specified above, you would be correct:

如果您的本能是将其导入到上面指定的项目中，那么您将是正确的：

<head>
 ...
 <link
  integrity=""
  rel="stylesheet"
  href="{{rootURL}}assets/second-stylesheet.css"
 >
...
</head>

Yet, it still doesn’t show up. Why? ? That’s because the build pipeline hasn’t been configured to build this file in the correct folder just yet.

然而，它仍然没有出现。为什么？？这是因为尚未将构建管道配置为在正确的文件夹中构建此文件。

第三步：配置Ember-CLI-Build (Step Three: Configure Ember-CLI-Build)

The final step is to tell the Ember app that you have a css file to include in its build pipeline.

最后一步是告诉Ember应用程序您有一个css文件要包含在其构建管道中。

In ember-cli-build.js add the following:

在ember-cli-build.js添加以下内容：

...
module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    // Add options here
    outputPaths: {
      app: {
        css: {
          'second-stylesheet': '/assets/second-stylesheet.css'
        }
      }
    }
    
  });
  ...
};

That’s it! ? This tells Ember where to output your new stylesheet so that it can be properly accessed in your index.html ?

而已！ ？这告诉Ember在哪里输出新样式表，以便可以在您的i ndex.html正确访问它？

翻译自: https://www.freecodecamp.org/news/ember-quicktips-how-to-breakup-and-import-sass-css-files-separately-b0759459027d/

sass css文件