Working With Stylesheets

Working With Stylesheets
Elixir processes all CSS files through Webpack. This brings with it some nifty Webpack properties such as automatic url resolution.
CSS
Due to the way Webpack processes css files, you can no longer have a css file named vendor.
You can mix traditional css with webpack using mix.css. You can pass one file or an array of files.
1
const elixir = require("coldbox-elixir");
2
​
3
module.exports = elixir(mix => {
4
    mix.css("app.css");
5
    mix.css([
6
        "node_modules/normalizecss/normalize.css"
7
        "resources/assets/css/normalize_overrides.css"
8
    ], {
9
        name: "normalize.css",
10
        entryDirectory: ""
11
    });
12
});
Copied!
mix.css accepts a configuration object as the second parameter:
1
{
2
    name: this.withoutExtension(filename),
3
    outputDirectory: "includes/css/",
4
    entryDirectory: "resources/assets/css/"
5
}
Copied!
PostCSS
If you add a postcss.config.js file to the root of your project, Elixir will process all of your styles through PostCSS. To learn more about PostCSS, visit their documentation.
Sass
The sass method allows you to compile Sass into CSS. Assuming your Sass files are stored at resources/assets/sass, you may use the method like so:
1
const elixir = require("coldbox-elixir");
2
​
3
module.exports = elixir(mix => {
4
    mix.sass("app.scss");
5
});
Copied!
Like the css method you may compile multiple Sass files into a single CSS file, and even customize the output directory of the resulting CSS:
1
elixir( function( mix ){
2
    mix.sass([
3
        "app.scss",
4
        "controllers.scss"
5
    ], {
6
        outputDirectory: "public/assets/css"
7
    });
8
} );
Copied!
Other Pre-processors
Elixir can be extended with any other pre-processor you would like. See our docs on writing your own extensions for others!

Configuration Options

Working With Scripts

Last modified 2mo ago

Copy link

Contents

Working With Stylesheets