Working With Stylesheets
Elixir processes all CSS files through Webpack. This brings with it some nifty Webpack properties such as automatic url resolution.
Due to the way Webpack processes css files, you can no longer have a css file namedvendor.
You can mix traditional css with webpack using
mix.css. You can pass one file or an array of files.const elixir = require("coldbox-elixir");
module.exports = elixir(mix => {
mix.css("app.css");
mix.css([
"node_modules/normalizecss/normalize.css"
"resources/assets/css/normalize_overrides.css"
], {
name: "normalize.css",
entryDirectory: ""
});
});
mix.css accepts a configuration object as the second parameter:{
name: this.withoutExtension(filename),
outputDirectory: "includes/css/",
entryDirectory: "resources/assets/css/"
}
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.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:const elixir = require("coldbox-elixir");
module.exports = elixir(mix => {
mix.sass("app.scss");
});
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:elixir( function( mix ){
mix.sass([
"app.scss",
"controllers.scss"
], {
outputDirectory: "public/assets/css"
});
} );
Elixir can be extended with any other pre-processor you would like. See our docs on writing your own extensions for others!
Last modified 8mo ago