1 year ago

#336048

test-img

Laetitia28

Import css file into scss file with sass-loader Webpack

I created my own npm lib where I have an scss file like this:

// From my own lib

index.scss

//
// Libraries
//
@import '~rc-texty/assets/index.css'; // This is from a node_modules package

On another React project, I import my own lib and then import the index scss file into the project app.scss file.

/project2/app/App.scss

// Import commons styles.
@import '~/my_own_lib/index';

When I npm run start, I got this error:

ERROR in ./src/app/App.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[0].oneOf[7].use[3]!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[7].use[4]!./src/app/Studio.scss)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '~rc-texty/assets/index.css' in '/home/usr/Documents/workspace/project2/src/app'
    at finishWithoutResolve (/home/usr/Documents/workspace/project2/node_modules/enhanced-resolve/lib/Resolver.js:293:18)

A part of my webpack configuration

{
                test: /\.(?:scss|sass)$/u,
                use: [
                    {
                        // Dynamically inject styles when loading JavaScript files.
                        loader: 'style-loader',
                    },
                    {
                        // Translates CSS into CommonJS
                        loader: 'css-loader',
                    },
                    {
                        // Compiles Sass to CSS
                        loader: 'sass-loader',
                        options: {
                            sassOptions: { includePaths: ['node_modules'] },
                            // Prefer Dart Sass ('sass') over 'node-sass' if both are installed
                            implementation: require('sass'),
                        },
                    },
                ],
            },

It seems that the import of rc-texty/assets/index.css doesn't work but I don't know why.

webpack

sass

sass-loader

0 Answers

Your Answer

Accepted video resources