Sass is tightly integrated into the Generator-M-Ionic's workflow. Learn how to use it to your advantage!
With the creation of every module comes a dedictated .scss
file in the module's styles
folder carrying the name of the module.
Every modules's .scss
file gets compiled by the gulp styles
task which is run automatically by gulp watch
, gulp build
or any of the sort. The compiled .css
files then get injected into your index.html
.
<!-- build:css main/styles/app.css -->
<!-- inject:css -->
<link rel="stylesheet" href="blank/styles/blank.css">
<link rel="stylesheet" href="main/styles/main.css">
<link rel="stylesheet" href="side/styles/side.css">
<!-- endinject -->
<!-- endbuild -->
The above example has three modules: main
, side
and blank
.
Note: That all the files are linked in the index.html
and are concatenated into a single app.css
upon building the app. Thus when you define a CSS rule it spans across all modules!
Many developers like to split their Sass into several files (if you don't, stick to the one that is generated with each module). However if you do, the Generator also supports this:
You can create as many _file.scss
files as you like and include them in any of your modules' .scss
files without having to worry about multiple includes. The Generator only compiles files and injects them into your index.html
when they start with a character that is different from an _
(underscore).
Let's create a _test.scss
file:
Your module.scss
:
@import 'test';
The result in the index.html
is the same as above but the compiled CSS also includes the contents of the imported `_test.scss file.
<!-- build:css main/styles/app.css -->
<!-- inject:css -->
<link rel="stylesheet" href="blank/styles/blank.css">
<link rel="stylesheet" href="main/styles/main.css">
<link rel="stylesheet" href="side/styles/side.css">
<!-- endinject -->
<!-- endbuild -->