汇总未检测到scss文件的@import语法

Question

我需要汇总来捆绑我的sass文件，比如变量、mixin等。index.scss包含

@import "./scss/variables.scss";

和index.ts包含

import "./index.scss";
export { Button } from "./components/Button";

然而，该捆绑包没有来自variables.css的任何代码，如果我在say Button.scs中使用变量，我会得到这个错误

[!] (plugin postcss) Error: Undefined variable: "$shady-lady".

我的汇总配置

export default {
input: "./src/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true,
},
{
file: packageJson.module,
format: "esm",
sourcemap: true,
},
],
plugins: [
resolve(),
cleaner({
targets: ["./lib"],
}),
postcss({
extract: true,
modules: true,
minimize: true,
plugins: [postcssImport(), autoprefixer()],
extensions: [".scss"],
}),
peerDepsExternal(),
commonjs(),
typescript({
exclude: ["**/*.stories.tsx", "**/*.test.tsx"],
}),
],
};

Answer 1

所以问题不在于@import语法。它被汇总为不处理全局资源文件。

解决方案是删除导入"/index.scs'从index.ts，只需使用这个包

https://github.com/hytromo/rollup-plugin-postcss-retain-sass-data#readme