Cannot find module 'node:path'

[richardherbert]

With only const eleventySass = require( 'eleventy-sass' ); in my .eleventy.js file I get...

[11ty] > Error in your Eleventy config file '/path/to/.eleventy.js'. You may need to run `npm install`.

`EleventyConfigError` was thrown
[11ty] > Cannot find module 'node:path'

Where have I gone wrong?

[kentaroi]

Thanks for reporting!

I couldn't reproduce that locally, but I've just fixed doubtful code and pushed it. Could you please update and try it again?

[richardherbert]

Thanks for the prompt response Kentaro, that helped.

I'm now trying to simulate production in my local dev environment with:

entyConfig.addPlugin( eleventySass, {
    compileOptions: {
        sass: {
            includes: './src/scss',
            style: 'compressed',
            sourceMap: false
        },
        permalink: function( contents, inputPath ) {
            return ( data ) => {
                return data.page.filePathStem.replace( /^\/scss/, '/css' ) + '.min.css';
            };
        }
    }
} );

...but I'm still getting a source map and the resulting CSS file is uncompressed. Any thoughts on that?

[kentaroi]

Sass options should be specified outside of compileOptions.

eleventyConfig.addPlugin( eleventySass, {
        sass: {
            includes: './src/scss',
            style: 'compressed',
            sourceMap: false
        },
    compileOptions: {
        permalink: function( contents, inputPath ) {
            return ( data ) => {
                return data.page.filePathStem.replace( /^\/scss/, '/css' ) + '.min.css';
            };
        }
    }
} );

And, probably, includes options are not necessary. I should've written this clearly in README, but includes options should be used for additional Sass/SCSS files. For example, when you want to include another Sass/SCSS file with @use or @forward rule, and it is not in your scss directory in your case.

All of the Sass/SCSS files in input directory ("src" directory in your case) and its subdirectories will be compiled by eleventy-sass without any includes or loadPaths options.

[richardherbert]

Thanks again, that was my issue, I'm new to a lot of this and missed my wrong config setup.

Another issue I'm discovered, I like to use a _data/layout.js file with just module.exports = 'layouts/default.html'; inside to apply a default layout around all my html/md files but now the HTML layout is being wrapped around the generated stylesheet.

Not a big issue, I can define the layout in my files with layout: layouts/default.html unless you know of a way to exclude the CSS file?

[kentaroi]

Thank you, too.

I'm not good at English and not sure what is your situation and what you'd like to do.

If you want to use the layout file, but do not want to use the CSS file specified in it. Do you have any reason that you cannot modify <link rel="stylesheet" href="path/to/css" /> line in your layouts/default.html file? Or, using template language file (such as Nunjucks or Liquid) instead of HTML file for layouts may be useful.

[richardherbert]

Don't worry, your English is better than any other language I can speak!

I like to use a default template as described here: https://www.11ty.dev/docs/data-template-dir/#example-apply-a-default-layout-to-multiple-templates

By naming the file layout.js and placing it in _data it is applied to all files that do not have a layout defined. But by doing this the layout template is wrapped around the generated CSS file which is not wanted.

[kentaroi]

Thank you for kind words and explaining in detail. Now I understand the problem.

I didn't realize this problem. Thank you very much for telling me. I've just fixed it, and published v1.1.2. Hope this works.

[richardherbert]

Thanks, that fixed it!

Thanks again for your prompt responses and loving the plugin!

[kentaroi]

Glad to hear that. Your comments did improve the quality of the plugin a lot. Thank you very much.