Failed to find file

[Infernoid Patrulea]

I’m trying to write “global” mixins in a _mixins.css file and then @import it at the beginning of all my stylesheets (similar to how SASS does it). My console outputs Failed to find '_mixins.css'.

It’s my first time using the plugin; not sure what’s happening.

---

Context

I’m using Eleventy and eleventy-plugin-bundler to generate CSS files based on inline styles after processing them with PostCSS.

_mixins.css is located in /includes/ (absolute; folder within the root of the project).

const pluginBundle = require("@11ty/eleventy-plugin-bundle");
const postcss = require("postcss");
const postcssImport = require("postcss-import");
const postcssMixins = require("postcss-mixins");
const postcssPresetEnv = require("postcss-preset-env");
const postcssNano = require("cssnano");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(pluginBundle, {
    toFileDirectory: "public",
    transforms: [
      async function(content) {
        if (this.type === "css") {
          let result = await postcss([
            postcssImport({
              path: "/includes/"
            }),
            postcssMixins,
            postcssPresetEnv,
            postcssNano
          ]).process(content, {
            from: this.page.inputPath,
            to: null
          });
          return result.css;
        }
        return content;
      }
    ]
  });

// …

[Ryan Zimmerman]

What does your CSS import of mixins look like?

[Infernoid Patrulea]

Both @import url("_mixins.css") and @import "_mixins.css" result in Failed to find '_mixins.css'.

[Ryan Zimmerman]

That's your problem; postcss-import uses a lookup mechanism similar to Node's require(), so it's looking for _mixins.css in node_modules. @import "./_mixins.css" should work.

[Infernoid Patrulea]

Only one more question; will the ./ be relative to the root of the project or the file I’m referencing it on?

[Ryan Zimmerman]

./ is relative to the file you're referencing from. However, using the path option may also include those paths, I forget the details of how that option works.