在Nuxt.js中使用Stylify CSS

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

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

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

在StackBlitz上试试吧

首先,使用CLI安装该软件包:

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

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

modules: [
	'@stylify/nuxt'
]

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

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

如何将Stylify CSS整合到Nuxt.js v2+ < v3

在StackBlitz上试试吧

首先,使用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

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

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

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

stylelint: {
	allowEmptyInput: true
}

构建配置

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

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

下一步该去哪里