@stylify/nuxt-module

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

在StackBlitz上试试吧

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

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

配置

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

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

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

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: [],
	// 当compiler.mangleSelectors设置为 "true "时，加载器会在webpack构建过程中使用，当nuxt运行生产构建时也会使用。
	// 当webpack根据定义的加载器加载一个文件时，它的内容
	// 将被Stylify CSS编译器处理。
	// 加载器有以下结构
	// {
	//		test: /\.vue$/i,
	//		include: ['path/to/some/dir']
	//	},
	loaders: []
});

nuxt.config.js的例子

export default {
	stylify: stylifyConfig
}

stylify.config.js的例子

export default stylifyConfig;