Importing sheets with dependencies on other npm packages

[marekpw]

I'm trying to import the @material/button library like this:

@import "~@material/button/mdc-button";

However the mdc-button tries to import from another library:

@import "@material/animation/variables";

Webpack/sass-loader understandably complains that the file is not found, because it's not prefixed with a tilde.

Is there any workaround/fix to this issue?

[Yizhachok]

Have the same issue

[borela]

@import "~@material/button/mdc-button/mdc-button.scss";
Or ask the owner of the package to add a main field in the package.json

[alexander-akait]

@marekpw @Yizhachok @borela can your provide minimal reproducible test repo?

[marekpw]

@evilebottnawi sure, here you go: https://github.com/marekpw/sass-loader-mdc/

As expected, prefixing the first import with tilde in @material/button/mdc-button.scss works, but it breaks on the next import.

[borela]

@marekpw got it, you need to add includePaths like so:

const { dirname, join, resolve } = require('path');
const webpack = require('webpack');

module.exports = {
    context: resolve('src'),
    entry: {
        app: './main.scss'
    },
    output: {
        filename: '[name].[hash].js',
        path: resolve('dist')
    },

    resolve: {
        extensions: ['.js', '.scss']
    },

    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "sass-loader", // compiles Sass to CSS
                    options: {
                      includePaths: [
                        join(dirname(module.filename), 'node_modules')
                      ]
                    }
                }]
            }
        ],
    }
};

Here's a full package for compiling websites in you case you need hot reloading too.

[marekpw]

Cool, that works. Thanks a lot.

[alexander-akait]

@borela @marekpw bad solution, using includePaths option reduces performance.

[borela]

@evilebottnawi What's the other option?

[alexander-akait]

@borela seems it is regression bug after #450 or #447

[borela]

@evilebottnawi I believe this bug was introduced before then, I had been using the includePath even for non scoped packages for a long time because the loader isn't using webpack's resolver, which is why I suggested custom extensions here.

It did seam counter intuitive to me to have to duplicate the paths from webpack's resolve.modules.

[alexander-akait]

@borela I will try to solve this problem today or tomorrow, thanks!

[borela]

@evilebottnawi Thank you, I wish I could offer better help but I am still learning how webpack loaders work.

[marekpw]

@borela as a workaround, it's still better than nothing for now :)