Блог

мне нужен накопительный пакет для объединения моих файлов sass, таких как переменные, миксины и т. Д. index.scss содержит

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

и index.ts содержит

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

однако в пакете нет кода из variables.scss, и если я использую переменную внутри, скажем, 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"],
    }),
  ],
};
 

так что проблема была не в синтаксисе @import. это был накопительный пакет, не обрабатывающий файлы глобальных ресурсов.

решение состояло в том, чтобы удалить импорт». /index.scss » из index.ts и просто использовать этот пакет

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