Closed 497363983 closed 2 months ago
请问用的是哪个主题插件,vite版本是多少?
请问用的是哪个主题插件,vite版本是多少?
vite
版本 5.2.11,使用本仓库中的 vite-plugin-semi-theme
引入自定义主题 @semi-bot/semi-theme-feishu-dashboard
。
另在解决主题问题时为了支持pnpm,修改了 vite-plugin-semi-theming
插件,会发现编译 _base/base.scss
报错,按照前面我说的修改后能够正常导入。修改后的插件代码如下:
import { readFileSync, existsSync } from 'fs';
import path from 'path';
import { platform } from 'os';
import { pathToFileURL } from 'url';
import { createRequire } from 'module';
const _require = createRequire(import.meta.url);
const isWindows = platform() === 'win32';
export function semiTheming({ theme, ...options }) {
const include = options.include && normalizePath(options.include);
const variables = convertMapToString(options.variables || {});
let viteConfig;
return {
name: 'semi-theme',
enforce: 'post',
configResolved(config) {
viteConfig = config;
},
async load(id) {
const filePath = normalizePath(id);
// https://github.com/DouyinFE/semi-design/blob/main/packages/semi-webpack/src/semi-webpack-plugin.ts#L83
if (/@douyinfe\/semi-(ui|icons|foundation)\/lib\/.+\.css$/.test(filePath) || /@kousum\/semi-ui-vue\/dist\/.+\.css$/.test(filePath) || /_base\/base.css$/.test(filePath)) {
const scssFilePath = filePath.replace(/\.css$/, '.scss');
const { default: sass } = await import('sass');
try {
return sass.compileString(loader(readFileSync(scssFilePath, 'utf-8'), {
...options,
name: theme,
include,
variables,
}), {
importers: [
{
findFileUrl(url) {
if (url.startsWith('~')) {
// Resolve theme scss from root node_modules
if (theme && url.startsWith(`~${theme}`)) {
return pathToFileURL(path.resolve(viteConfig.root, 'node_modules', url.substring(1)));
}
return pathToFileURL(path.resolve(scssFilePath.substring(0, scssFilePath.lastIndexOf('/node_modules/') +
'/node_modules/'.length), url.substring(1)));
}
const filePath = path.resolve(path.dirname(scssFilePath), url);
if (existsSync(filePath)) {
return pathToFileURL(filePath);
}
return null;
},
},
],
logger: sass.Logger.silent,
}).css;
} catch (error) {
console.log(error);
console.log('Error compiling SCSS file:', scssFilePath);
}
}
},
};
}
export default semiTheming;
// copy from https://github.com/DouyinFE/semi-design/blob/main/packages/semi-webpack/src/semi-theme-loader.ts
function loader(source, options) {
const theme = options.name || '@douyinfe/semi-theme-default';
// always inject
const scssVarStr = `@import "~${theme}/scss/index.scss";\n`;
// inject once
const cssVarStr = `@import "~${theme}/scss/global.scss";\n`;
let animationStr = `@import "~${theme}/scss/animation.scss";\n`;
let componentVariables;
let fileStr = source;
try {
_require.resolve(`${theme}/scss/animation.scss`);
}
catch (e) {
animationStr = ''; // fallback to empty string
}
try {
componentVariables = _require.resolve(`${theme}/scss/local.scss`);
}
catch (e) {
// ignore
}
if (options.include || options.variables || componentVariables) {
let localImport = '';
if (componentVariables) {
localImport += `\n@import "~${theme}/scss/local.scss";`;
}
if (options.include) {
localImport += `\n@import "${options.include}";`;
}
if (options.variables) {
localImport += `\n${options.variables}`;
}
try {
const regex = /(@import '.\/variables.scss';?|@import ".\/variables.scss";?)/g;
const fileSplit = fileStr.split(regex).filter(item => Boolean(item));
if (fileSplit.length > 1) {
fileSplit.splice(fileSplit.length - 1, 0, localImport);
fileStr = fileSplit.join('');
}
}
catch (error) {
// ignore
}
}
// inject prefix
const prefixCls = options.prefixCls || 'semi';
const prefixClsStr = `$prefix: '${prefixCls}';\n`;
if (source.includes('semi-base')) {
return `${animationStr}${cssVarStr}${scssVarStr}${prefixClsStr}${fileStr}`;
}
else {
return `${scssVarStr}${prefixClsStr}${fileStr}`;
}
}
// copy from https://github.com/DouyinFE/semi-design/blob/main/packages/semi-webpack/src/semi-webpack-plugin.ts#L136
function convertMapToString(map) {
return Object.keys(map).reduce(function (res, cur) {
return res + `${cur}: ${map[cur]};\n`;
}, '');
}
function normalizePath(p) {
return path.posix.normalize(isWindows ? p.replace(/\\/g, '/') : p);
}
@497363983 你似乎用了vite-plugin-semi-theme这个插件,本仓库的插件包名是@kousum/vite-plugin-semi-theme
@497363983 你似乎用了vite-plugin-semi-theme这个插件,本仓库的插件包名是@kousum/vite-plugin-semi-theme
@rashagu 我使用的的确是@kousum/vite-plugin-semi-theme,前面是我的描述不清楚。在使用这个的时候我用的主题没有被成功导入。
@497363983 请提供一下最小化重现仓库地址
This issue is stale because it has been open for 14 days with no activity.
可以看到在这个里面,Select
是缺少边框的,并且部分 token 是未定义的状态(但实际上它们应该是存在的)。
@497363983 这个主题背景默认就是白色
@rashagu 请注意观察边框,这个主题在浅色模式下表单项的边框是存在的,但是使用现有插件引入后表单项的边框是缺失的,并不是背景的问题
这才是这个主题在浅色模式下应有的表现
组件级变量需要额外配置。新版本不需要了
具体表现为使用theme插件引入主题后出现包括但不限于
form
表单中select
边框缺失,同时引入主题后部分scss变量处于未定义状态。 这应与semi-ui-vue
下的_base/base.scss
中的导入语句@import '@douyinfe/semi-foundation/base/base';
缺少~
有关,将其修改为@import '~@douyinfe/semi-foundation/base/base';
即可修复该问题。