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 semicolons).
- 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 EITHER disable ESLint OR tell ESLint which Vue components are using Coffeescript.
/build/webpack.base.conf.js and remove the following section from
lang="coffee" to identify components which are using Coffeescript, but
lang="coffee" is not recognizable for ESLint. Fortunately, ESLint (following traditional HTML) uses
type="xxx" to identify the type of scripts. As long as a
<script> tag has any
type other than
type="text/coffeescript" to identify itself. Therefore, in your Vue components which are using Coffeescript, using both
type to avoid ESLint:
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).