Failed to find file
patrulea opened this issue · comments
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;
}
]
});
// …
What does your CSS import of mixins look like?
Both @import url("_mixins.css")
and @import "_mixins.css"
result in Failed to find '_mixins.css'
.
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.
Only one more question; will the ./
be relative to the root of the project or the file I’m referencing it on?
./
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.