Nuxt.js integration

For easier integration into the Nuxt.js, there is a package named @stylify/nuxt-module.

It is focused on seamless integration and also provides an extension for profiler that will show you what is your configuration or what the size of your CSS is.

Edit on StackBlitz

Integration example for the Nuxt.js can be found in integrations examples repository .

How to integrate Stylify into the Nuxt.js

First install the package using CLI:

npm i -D @stylify/nuxt-module

yarn add -D @stylify/nuxt-module

Than add a build module into the nuxt.config.js build modules section:

buildModules: [
    '@stylify/nuxt-module'
]

Now you can start using Stylify with Nuxt.js.

Configuration

There is a lot of options you can configure. See @stylify/nuxt-module. For the bundler configuration checkout the @stylify/bundler page. For the Compiler config, checkout the Compiler documentation.

Stylelint

In case you use Stylelint, you may want to add the generated stylify.css and possible files with variables into the .stylelintignore file.

assets/stylify.css
assets/scss/variables/stylify-variables.scss

If the Stylelint complains about a pattern that doesn't match any files, add the --allow-empty-input rule into the package.json file to the lint:style and the stylelint config into the nuxt.config.js:

stylelint: {
    allowEmptyInput: true
}