Vue3配合MaterializeCSS如何使用Sass @extend实现文本着色？

错误原因 #

当前在main.js中引入的是已编译完成的materialize.min.css纯CSS文件，仅会在项目打包的CSS合并阶段被注入全局样式。而Sass的@extend指令是在Sass预编译阶段执行，该阶段预处理器无法读取到已编译CSS文件中的选择器，因此会抛出目标选择器未找到的错误。添加!optional标记仅会跳过报错，不会实际匹配到对应的样式规则。

操作方案 #

Vue3完全支持使用MaterializeCSS的Sass @extend能力，只需引入MaterializeCSS的Sass源文件而非编译后的CSS文件即可，操作步骤如下：

1. 前置依赖安装
   确保项目已安装Sass相关编译依赖，未安装可执行以下命令：

npm i sass sass-loader -D

2. 配置Sass全局注入
   根据你使用的项目脚手架选择对应配置：

Vite 项目 #

在vite.config.js中添加Sass预处理器配置，注入MaterializeCSS的Sass入口文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "materialize-css/sass/materialize.scss";`
      }
    }
  }
})

Vue CLI 项目 #

在vue.config.js中添加对应配置：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~materialize-css/sass/materialize.scss";`
      }
    }
  }
}

3. 清理重复引入
   删除之前在main.js中引入的materialize.min.css代码，避免样式重复打包。
4. 重启项目
   配置完成后重启项目，之前的@extend代码即可正常生效，不会再抛出错误。

额外说明 #

如果需要自定义MaterializeCSS的默认样式变量（如主题色、字体大小等），可以在引入materialize.scss之前先定义自定义变量，即可覆盖默认配置：

// 示例：自定义主色调
$primary-color: #1976D2;
@import "materialize-css/sass/materialize.scss";

内容的提问来源于stack exchange，提问作者DuchSuvaa