Nuxt 3 笔记：CSS 开发

Open cssmagic opened this issue 1 year ago • 0 comments

文件组织

所有写在 Vue 组件之外样式代码，统一存放在 @/assets/css/ 目录下。

准备工作

预处理器

安装 npm i -D sass。
编写全局的预埋样式（变量、mixin 等），汇总到 @/assets/css/base/index.scss。
修改 nuxt.config.ts，注入预埋样式（参见下文）。
在组件中可以直接使用预埋的变量、mixin 等。

PostCSS / autoprefixer / browserslist

有人说 Nuxt（可能是 v2）内置了 autoprefixer，可以自动识别 package.json 里的 browserslist 字段。（待确认）
其他 PostCSS 插件的使用方法待确认。

自动注入预埋样式

export default defineNuxtConfig({
	vite: {
		css: {
			preprocessorOptions: {
				scss: {
					additionalData: '@use "@/assets/css/base/index.scss" as *;',
				},
			},
		},
	},
})

这个配置似乎会把那一句代码注入每个组件（包括 Layout），从而实现预埋样式随处可用。

加载全局 CSS

export default defineNuxtConfig({
	css: [
		// Load a Node.js module directly (here it's a Sass file).
		'bulma',
		// CSS file in the project
		'@/assets/css/main.css',
		// SCSS file in the project
		'@/assets/css/main.scss'
	]
})

这种方法不能用于加载 @/assets/css/base/index.scss，预埋的变量并不能被组件复用。似乎是因为这里声明的全局 CSS 文件独立编译，并不能影响组件自己的样式；或者这里的 SCSS 只是被编译为 CSS 代码之后塞进每个页面而已（加载方式待确定），并不参与每个页面自己的样式渲染过程。

这里的 SCSS 文件在编译过程中，也会受到上述 “自动注入预埋样式” 的影响。

网页最终加载的 CSS

本段内容未完成。

或许可以参考 Nuxt 2 的相关笔记。

加载第三方 CSS

本段内容未完成。

或许可以参考 Nuxt 2 的相关笔记。