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

Question

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

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

和index.ts包含

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

但是捆绑包中没有来自 variables.scss 的任何代码，如果我在 say Button.scss 中使用变量，我会收到此错误

[!] (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.ts 中删除导入 './index.scss' 并只使用这个包

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

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

rollup not detecting @import syntax for scss files

javascript

rollup

sass

reactjs

rollupjs