vite引入element-plus修改主题色报错

使用vite搭建vue3.0项目

• 全局安装vite

# yarn 
yarn global add create-vite-app

# npm 
npm global install create-vite-app

• 初始化vite项目

# 创建vite
create-vite-app vue-vite

# 进入vue-vite项目
cd vue-vite

# 安装依赖包
yarn install

# 安装element-plus
yarn add element-plus -D

# 运行项目
yarn run dev

引用element-plus

• main.js 引入element-plus

# main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import './element-variables.scss'
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

• 修改element主题色

# element-variables.scss

/* 改变主题色变量 */
$--color-primary: teal;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-plus/lib/theme-chalk/fonts';

@import "~element-plus/packages/theme-chalk/src/index";

element-plus报错

Can't find stylesheet to import,报错说找不到样式

Error: Can't find stylesheet to import.
  ╷
7 │ @import "~element-plus/packages/theme-chalk/src/index";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\element-variables.scss 7:9  root stylesheet
    at Object._newRenderError (E:\CMS-vite\node_modules\sass\sass.dart.js:13494:19)
    at Object._wrapException (E:\CMS-vite\node_modules\sass\sass.dart.js:13337:16)
    at StaticClosure._renderSync (E:\CMS-vite\node_modules\sass\sass.dart.js:13312:18)
    at Object.Primitives_applyFunction (E:\CMS-vite\node_modules\sass\sass.dart.js:1085:30)
    at Object.Function_apply (E:\CMS-vite\node_modules\sass\sass.dart.js:6003:16)
    at _callDartFunctionFast (E:\CMS-vite\node_modules\sass\sass.dart.js:7672:16)
    at Object.renderSync (E:\CMS-vite\node_modules\sass\sass.dart.js:7650:18)
    at scss (E:\CMS-vite\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:960:33)
    at preprocess$1 (E:\CMS-vite\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:1155:12)
    at doCompileStyle (E:\CMS-vite\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:1058:48) {
  formatted: "Error: Can't find stylesheet to import.\n" +
    '  ╷\n' +
    '7 │ @import "~element-plus/packages/theme-chalk/src/index";\n' +
    '  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
    '  ╵\n' +
    '  src\\element-variables.scss 7:9  root stylesheet',
  line: 7,
  column: 9,
  file: 'E:\\CMS-vite\\src\\element-variables.scss',
  status: 1
} 0 [  Error: Can't find stylesheet to import.
    ╷
  7 │ @import "~element-plus/packages/theme-chalk/src/index";
    │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    src\element-variables.scss 7:9  root stylesheet
      at Object._newRenderError (E:\CMS-vite\node_modules\sass\sass.dart.js:13494:19)
      at Object._wrapException (E:\CMS-vite\node_modules\sass\sass.dart.js:13337:16)
      at StaticClosure._renderSync (E:\CMS-vite\node_modules\sass\sass.dart.js:13312:18)
      at Object.Primitives_applyFunction (E:\CMS-vite\node_modules\sass\sass.dart.js:1085:30)
      at Object.Function_apply (E:\CMS-vite\node_modules\sass\sass.dart.js:6003:16)
      at _callDartFunctionFast (E:\CMS-vite\node_modules\sass\sass.dart.js:7672:16)
      at Object.renderSync (E:\CMS-vite\node_modules\sass\sass.dart.js:7650:18)
      at scss (E:\CMS-vite\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:960:33)
      at preprocess$1 (E:\CMS-vite\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:1155:12)
      at doCompileStyle (E:\CMS-vite\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:1058:48) {
    formatted: "Error: Can't find stylesheet to import.\n" +
      '  ╷\n' +
      '7 │ @import "~element-plus/packages/theme-chalk/src/index";\n' +
      '  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
      '  ╵\n' +
      '  src\\element-variables.scss 7:9  root stylesheet',
    line: 7,
    column: 9,
    file: 'E:\\CMS-vite\\src\\element-variables.scss',
    status: 1
  }
]

解决方案

~改成node_modules/，安装scss --dev，然后引入时去掉.scss/.css,完美运行

  $--color-primary: #fc9153;

  $--font-path: 'node_modules/element-plus/lib/theme-chalk/fonts';

  @import "node_modules/element-plus/packages/theme-chalk/src/index";

  @import 'node_modules/element-plus/lib/theme-chalk/display';

结语

坚决做第一个吃螃蟹的程序员