Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Importing global css custom variables

I'm trying to use webpack with postcss to import a theme-variables.css file that contains my css custom variables.

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

Basically I want any css that imports theme-variable to be able to access these css custom properties and resolve to static values using postcss-css-variables.

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

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

becomes

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

However I keep getting webpack errors variable --babyBlue is undefined and used without a fallback

main.js ends up looking like this:

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

Here's my webpack (index.js requires 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"
    })
  ]
};
like image 379
Reed Avatar asked Dec 06 '18 18:12

Reed


People also ask

Can you import variables into CSS?

Now, when we wrote all our CSS variables we can import them. Because we import variables in the :root we can import them just once in our common stylesheet style. scss . And then we can use these variables without import in other files that will be imported among common styles.

Are CSS variables global?

First of all: CSS variables can have a global or local scope. Global variables can be accessed/used through the entire document, while local variables can be used only inside the selector where it is declared.

Can you import CSS into SCSS?

scss files, Sass can import plain old . css files. The only rule is that the import must not explicitly include the . css extension, because that's used to indicate a plain CSS @import .

Can I use CSS variables IE11?

Note: CSS variables are not and won't be supported in IE11. You can either create a static stylesheet for all UA browsers or decide to leverage them in most UA browsers + use a JS fallback for IE11 if you want to support this browser – you can test for CSS variables support in JS.


1 Answers

Solution: The postcss-import plugin has to come first HOWEVER the plugins for Postcss-loader does not go in reverse order like webpack loaders do.

This fixes it:

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

   ]
}
like image 101
Reed Avatar answered Nov 15 '22 13:11

Reed