1 year ago
#336048
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