Динамический импорт scss с использованием rollup-plugin-postcss - PullRequest
Новая
       23

Динамический импорт scss с использованием rollup-plugin-postcss

0 голосов
/ 16 января 2019

Мне нужно, чтобы мои операторы @import внутри файлов scss менялись в зависимости от параметров, переданных в rollup & rollup-plugin-postcss

У меня есть куча файлов scss с операторами импорта, такими как @import 'theme/vars/colors. Эти файлы были размещены в проекте веб-пакета, который обрабатывался передачей аргумента командной строки во время сборки. Это изменит импорт на @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"]
  };
};

Мне бы хотелось иметь возможность изменять импорт внутри файлов scss при компиляции scss в css.

n.b. импорт scss в мои реагирующие компоненты в порядке, *

...