Импорт глобальных CSS-переменных

Question

Я пытаюсь использовать webpack с postcss для импорта файла theme-variables.css, который содержит мои собственные переменные css.

//theme-variables.css
:root {
    --babyBlue: blue;
}

По сути, я хочу, чтобы любой css, импортирующий переменную theme, мог иметь доступ к этим пользовательским свойствам css и преобразовывать их в статические значения с помощью postcss-css-variable.

//style.css
@import "./theme-variable.css";

div {
    display: flex;
    color: var(--babyBlue);
}

становится

//main.css
div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: blue;
}

Однако я продолжаю получать ошибки Webpack variable --babyBlue is undefined and used without a fallback

main.js в конечном итоге выглядит так:

:root {
    --babyBlue: blue;
}
div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: undefined;
}

Вот мой веб-пакет (index.js требует styles.js):

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: { main: "./src/index.js" },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: "css-loader",
            options: { importLoaders: 1 }
          },
          {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              plugins: loader => [
                require("postcss-css-variables")(),
                require("postcss-cssnext")(),
                require("autoprefixer")(),
                require("postcss-import")()
              ]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

Answer 1

Решение: плагин postcss-import должен стоять первым. ОДНАКО плагины для Postcss-загрузчика не идут в обратном порядке, как это делают загрузчики webpack.

Это исправляет это:

loader: "postcss-loader",
options: {
   ident: "postcss",
   plugins: loader => [
      require("postcss-import")()
      require("postcss-css-variables")(),
      require("postcss-cssnext")(),
      require("autoprefixer")(),

   ]
}