时间戳

首页 > 解决方案 > 如何为 Javascript 项目正确发布 SCSS 包

javascript - 如何为 Javascript 项目正确发布 SCSS 包

问题描述

我有一个color.scss和main.scss文件如下

//color.scss
$special-blue: #0000ff;

:export {
  testBlue: $special-blue;
}

//main.scss
@import 'src/colors';

通过上面的设置，webpack通过几个 webpack-loaders 来创建 CSS，例如css-modules-typescript-loader, css-loader, postcss-loader, sass-loader. webpack 编译完成后，我将获得捆绑的 CSS 以及main.scss.d.ts以下内容

interface CssExports {
  'testBlue': string;
}
export const cssExports: CssExports;
export default cssExports;

然后我所做的是发布了 NPM 包，由main.scss, bundled.css&组成main.scss.d.ts。当我将包导入我的 React 项目并运行该项目时，我遇到了错误

编译失败。SassError：找不到或无法读取要导入的文件：src/color.scss on line 1 of xxxxxx/main.scss

看样子，好像不能只复制main.scss，而是需要复制整个SCSS源代码，才能引用SCSS变量？

想知道是否有任何替代解决方案？

标签： javascriptreactjstypescriptwebpacksass

解决方案

推荐阅读