loadPaths does not work

[dejangrba]

Hi kentaroi,

I love your plugin.

However, I encountered an issue after moving my scss folder outside of my eleventy input folder.

Here is my eleventy directories config in .eleventy.js:

... dir: { input: "src/pages", data: "../_data", includes: "../_includes", layouts: "../_layouts", output: "_site", }

So, my eleventy input folder is src/pages and my scss code is in src/scss.

I used the loadPaths option in my eleventy-sass plugin settings to specify the new scss location, and tried all possible symbol arrangements, one by one, and none works:

loadPaths: ["/src/scss/"], loadPaths: ["/src/scss"], loadPaths: ["/src/scss"], loadPaths: ["src/scss/"], loadPaths: ["src/scss"], loadPaths: ["./src/scss/"], loadPaths: ["./src/scss"],

Please note that the option includes: "../_includes", in my eleventy-sass plugin settings works as expected when I move my scss folder back to the eleventy input folder.

I would appreciate your help here.

Cheers!

[kentaroi]

Thanks for loving the plugin, @dejangrba!

eleventy-sass makes use of Eleventy's file watching functionality. Therefore, your Sass/SCSS files should be inside your project's input directory.

But, first of all, is there any reason why your directories config should not be like this:

return { dir: { input: "src", layouts: "_layouts" } };

[dejangrba]

Hi kentaroi,

Thanks for the quick reply and clarification. My new folder arrangement allows for opening files in fewer nested folders during development. Of course, there is no problem having the scss folder inside my eleventy input dir.

Best,

[kentaroi]

In your directory config, you wrote ../_data, ../_includes and ../layouts, and they might actually work well, but they seem not to be valid options, because the official doc says

Valid Options | Any valid directory inside of dir.input

Configuration options

Please correct me if I'm wrong. Your directory structure seems to be something like this:

├── .eleventy.js
├── _site
└── src
    ├── _data
    ├── _includes
    ├── _layouts
    ├── pages
    │   └──  your-page.md
    └── scss
        └── style.scss

In that case, your directories config can be written like this:

return { dir: { input: "src", layouts: "_layouts" } };

, because output, data and includes directories are the defaults, if you set src to input property.

I recommend you to put your contents (markdown files) in src directory and its subdirectories instead of in src/pages directory and its subdirectories.

However, if you have any reason to place them in src/pages directory, you can use permalinks.

For example, add a permalink setting to src/pages/pages.json like this:

{
  "permalink": "/{{ page.fileSlug }}/index.html"
}

The result will be the follows:

├── _site
│    └── your-page
│        └── index.html
└── src
    ├── _data
    ├── _includes
    ├── _layouts
    ├── pages
    │   └──  your-page.md
    └── scss
        └── style.scss

By the way, loadPaths is NOT for teaching Eleventy where your Sass/SCSS files are, but for informing dart-sass library how to load other Sass/SCSS files from a Sass/SCSS file by using @use, @forward or @import rules.

Again, your Sass/SCSS files should be in your input directory or its subdirectories to make Eleventy compile them. This is how this plugin works.

If you want to make dart-sass library work independently, I recommend you to use eleventy-plugin-dart-sass, for example.

[kentaroi]

If you want to stick with your directories config, you can also use addWatchTarget() method in your .eleventy.js to watch files outside of your input directory.

[dejangrba]

Hi kentaroi,

Many thanks for further clarifications, particularly that

loadPaths is NOT for teaching Eleventy where your Sass/SCSS files are, but for informing dart-sass library how to load other Sass/SCSS files from a Sass/SCSS file by using @use, @forward or @import rules

because I initially thought loadPaths was doing just that. Perhaps you could add this explanation to the plugin's readme section about the loadPaths.

Anyway, I can easily solve my folder configuration with the permalink rule.

Best regards

[kentaroi]

I'm glad to hear it 😄

Perhaps you could add this explanation to the plugin's readme section about the loadPaths.

Thanks. I will.