SASS: Unable to import core scss files from sass

[sermagnus]

Checks

• [X] Not a duplicate.
• [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

4.1.4

Description

The "./src/" field is missing from package.json exports to allows scss files to be imported into sass:

The field to add is the following "./src/": "./src/",

Reproduction Link

No response

Steps to Reproduce

1. Create a SCSS file
2. Insert this row @use "@splidejs/splide/src/css/core/object/objects";
3. Build

Expected Behaviour

It would be useful import scss files to allow for more customization.

[NaotoshiFujita]

Sass does not care about exports field. I don't know what bundler/builder you are using, but you need to reference it by the abs path, or use a path alias.

[sermagnus]

You are right, I was inaccurate in describing the problem. The problem exists only with bundler systems that support "Package exports", for example webpack.

[NaotoshiFujita]

So you mean you are using sass-loader? What error did you see?

[sermagnus]

When I try to import a scss from Splide core with this simple line @use "@splidejs/splide/src/css/core/object/objects";

I get this error:

 1 │ throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Can't find stylesheet to import.
25 │ @use \"@splidejs/splide/src/css/core/object/objects\"; ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

assets\\scss\\default.scss 25:1  root stylesheet");

My sass-loader configuration is very simple:

module: {
    rules: [
        {
            test: /\.s?[ac]ss$/,
            exclude: /\/node_modules\//,
            use: [{
                  ....
            },
            {
                  loader: 'sass-loader',
                  options: {
                      webpackImporter: true,
                      implementation: sass,
                      additionalData: '$env: ' + process.env.NODE_ENV + ';',
                      sassOptions: {
                          style: 'expanded',
                          includePaths: [path.resolve(__dirname, '/assets/scss/')]
                      }
                  }
              }]
        }]
}