使用rollup-plugin-postcss动态导入scss

Question

我需要在scss文件中使用@import语句来根据传递给rollup和rollup-plugin-postcss的参数进行更改

我有一堆具有导入语句（例如@import 'theme/vars/colors）的scss文件。这些文件托管在一个webpack项目中，该项目在构建时通过传递命令行arg进行处理。这会将导入更改为@import themes/uk/theme/var/colors。

// rollup.config.js
import babel from "rollup-plugin-babel";
import filesize from "rollup-plugin-filesize";
import minify from "rollup-plugin-babel-minify";
import resolve from "rollup-plugin-node-resolve";
import postcss from "rollup-plugin-postcss";

export default {
  input: "src/index.js",
  output: {
    file: "build/main.min.js",
    name: "swui",
    sourcemap: "inline",
    format: "cjs",
  },
  external: ["react", "prop-types", "classnames", "react-router"],
  plugins: [
    postcss({
      config: {
        ctx: {
          foo: "bar" // just testting to see if I can pass configs!
        }
      }
    }),
    resolve(),
    babel({
      babelrc: false,
      exclude: "node_modules/**",
      presets: [["@babel/env"], "@babel/react"],
      plugins: ["@babel/plugin-proposal-class-properties"]
    }),
    minify({
      comments: false
    }),
    filesize() 
  ]
};

和

// postcss.config.js
module.exports = context => {
  console.log(context);
  return {
    use: [c => console.log(c)],
    plugins: {
      "postcss-import": {
        from: "./dave"
      }
    extract: true,
    extensions: [".scss"]
  };
};

Id希望能够在将scss编译为css时更改scss文件内的导入。

n.b。我的react组件中的scss导入就可以了