CSS pre-processors like Sass, SCSS, Less and Stylus are still popular today, so it's natual that Saber supports them out of the box. However relevant dependencies for transpilation are required, be sure to follow the installation instructions below.
Sass / SCSS
yarn add sass-loader sass --devThen you can import .scss and .sass files. If you want to import files from node_modules, make sure to add ~ prefix as follows:
// importing a css file from the nprogress node module
@import '~nprogress/nprogress';Less
yarn add less-loader less --devStylus
yarn add stylus-loader stylus --devPassing Options to Pre-Processor Loaders
Sometimes you may want to pass options to the pre-processor's webpack loader. You can do that using the build.loaderOptions option in saber-config.js. For example, to pass some shared global variables to all your Sass/Less styles:
module.exports = {
build: {
loaderOptions: {
// pass options to sass-loader
sass: {
// @/ is an alias to your project root
// so this assumes you have a file named `scss/variables.scss`
data: `@import "@/scss/variables.scss";`
},
// pass Less.js Options to less-loader
less:{
// http://lesscss.org/usage/#less-options-strict-units `Global Variables`
// `primary` is global variables fields name
globalVars: {
primary: '#fff'
}
}
}
}
}