Ember QuickTips: How to breakup and import SASS/CSS files separately
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:
<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.
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 😏
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:
ember install ember-cli-sassNow rename app/styles/app.css to app/styles/app.scss. The preprocessor will take care of processing and compiling your stylesheet automatically.
If you run the app the Ember welcome page should display as usual:
Comment out {{welcome-page}} in app/templates/application.hbs before you continue. We now have a blank DOM to work with.
Step Two: Create a new stylesheet
Let’s create a new stylesheet called app/styles/second-stylesheet.scss and add the following styles:
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.
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.
In ember-cli-build.js add the following:
...module.exports = function(defaults) { let app = new EmberApp(defaults, { // Add options hereoutputPaths: { 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 🤓
