@stylify/nuxt

Nuxt模块提供无缝的Stylify CSS集成到Nuxt.js v3+中。

在StackBlitz上试试吧

安装

Nuxt模块只能通过NPM或Yarn等CLI安装：

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

使用方法

在nuxt.config.js中添加一个模块：

modules: [
	'@stylify/nuxt'
]

配置

如果你想配置Stylify，你可以在nuxt.config.js中直接使用配置部分，或者在nuxt.config.js旁边创建一个文件stylify.config.js。在这两种情况下，你都使用下面所示的相同配置方案。

下面的代码部分应该用在nuxt.config.js里面或者stylify.config.js或者stylify.config.mjs里面：

import { defineConfig } from '@stylify/nuxt';

const stylifyConfig = defineConfig({
	dev: false,
	configPath: 'stylify.config.js',
	//编译器配置信息 https://stylifycss.com/en/docs/stylify/compiler#configuration
	compiler: {
		// https://stylifycss.com/en/docs/stylify/compiler#variables
		variables: {},
		// https://stylifycss.com/en/docs/stylify/compiler#macros
		macros: {},
		// https://stylifycss.com/en/docs/stylify/compiler#components
		components: {},
		// ...
	},
	// 当vars dir paths被设置后，Stylify CSS会根据给定的路径将变量导出到
	// 根据给定的路径导出一个文件
	// cssVarsExportPath: 'path/to/dir',
	// cssVarsExportPath: 'path/to/export-file.css',
	cssVarsExportPath: null,
	sassVarsExportPath: null,
	lessVarsExportPath: null,
	stylusVarsExportPath: null,
	//文件掩码被@stylify/bundler使用。
	// 捆绑器使用这些掩码来寻找他应该生成CSS的文件。
	// 当你添加一个掩码，并且你想要mangleSelectors时，你还需要添加适当的加载器。见下文
	filesMasks: []
});

nuxt.config.js的例子

export default {
	stylify: stylifyConfig
}

stylify.config.js的例子

export default stylifyConfig;