在Nuxt.js中使用Stylify CSS

Nuxt.js是一个使用Vue.js的开源框架，使网页开发简单而强大。

该集成使用了Nuxt 2和Nuxt 3的Stylify CSS包。请看下面的指南。

如何将Stylify CSS集成到Nuxt.js v3+中

首先，使用CLI安装该软件包：

npm i -D @stylify/nuxt
yarn add -D @stylify/nuxt

然后在nuxt.config.js构建模块部分添加一个构建模块：

modules: [
	'@stylify/nuxt'
]

现在你可以开始使用Nuxt.js的Stylify CSS了。

由于一些未知的原因，当Nuxt中出现错误（语法、重复属性）时，CSS不会被重新加载。如果发生这种情况，只需在Nuxt配置文件中点击保存或重新启动开发服务器。

首先，使用CLI安装该软件包：

npm i -D @stylify/nuxt-module
yarn add -D @stylify/nuxt-module

然后在nuxt.config.js构建模块部分添加一个构建模块：

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

现在你可以开始使用Nuxt.js的Stylify CSS了。

你可以配置很多的选项：

如果你使用Stylelint，你可能想把生成的stylify.css和可能带有变量的文件加入.stylelintignore文件。

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

如果Stylelint抱怨没有匹配任何文件的模式，请将—allow-empty-input规则添加到package.json文件中的lint:style和stylelint配置中的nuxt.config.js：

stylelint: {
	allowEmptyInput: true
}

构建可能会失败，因为它没有被配置为使用现代ES6特性。你可以通过在nuxt.config.js中设置transpile选项来解决这个问题：

build: {
	transpile: [
		'@stylify/stylify/lib/index.cjs',
		'@stylify/stylify/esm/index.mjs'
	]
}