The boilerplate created with Quasar CLI has pre-configured CSS extraction for most popular CSS pre-processors including LESS, SASS, Stylus, and PostCSS. To use a pre-processor, all you need to do is installing the appropriate webpack loader for it. For example, to use SASS:
Note you also need to install node-sass because sass-loader depends on it as a peer dependency.
By default, if you will use LESS, SASS/SCSS you only need to install the loader. If however you want another CSS preprocessor, install the loader then edit
build/css-utils.js by adding an entry to
styleLoaders besides the standard following ones:
After installing your loaders, make sure you edit
build/webpack.base.config.js and add entries to
module/rules for each new loader. Example of a loader:
Once installed, you can use the pre-processors inside your
*.vue components using the lang attribute on
- lang=”scss” corresponds to the CSS-superset syntax (with curly braces and semicolones).
- lang=”sass” corresponds to the indentation-based syntax.
*.vue files (and all other style files) are piped through PostCSS by default, so you don’t need to use a specific loader for it.
By default, PostCSS is configured to use Autoprefixer.
If you are using Coffeescript then you need to disable ESLint. Open up
/build/webpack.base.conf.js and remove the following section from
To ensure consistent extraction and processing it is recommended that you import global, standalone style files from your root component, for example:
Note you should probably only do this for the styles written by yourself for your application. For existing libraries e.g. Bootstrap or Semantic UI, you can place them inside
src/statics/ and reference them directly in index.html. This avoids extra build time and also is better for browser caching. (See Handling Static Assets).