'SCSS React Library compilation
I have a problem when I try to compile my React library.
I have 2 projects: my-library and web-app.
- my-library contains all components
- web-app use my-library components
When I compile my-library project make a folder named lib. When I compile the project all the javascript classes are generated inside.
The problem is that inside each component folder there are 2 typescript files and one scss file. The two TS files generate fine but the scss file not.
package.json
"name": "my-library",
"version": "0.0.14",
"main": "lib/index.js",
"module": "lib/index.js",
"files": [
"lib",
"README.nmd"
],
...
"scripts": {
"build": "tsc && yarn copy-files",
"test": "react-scripts test",
"coverage": "npm test -- --coverage",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook -o build",
"copy-files": "cp ./package.json ./lib/package.json"
},
tsconfig.json
{
"compilerOptions": {
"rootDir": "./src",
"target": "es5",
"forceConsistentCasingInFileNames": false,
"allowSyntheticDefaultImports": true,
"module": "ES6",
"allowJs": true,
"sourceMap": true,
"keyofStringsOnly": true,
"jsx": "react",
"experimentalDecorators": true,
"skipLibCheck": true,
"types": [
"node"
],
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"outDir": "./lib/",
"declaration": true,
"noImplicitAny": true,
"moduleResolution": "node",
"resolveJsonModule": true
},
"include": [
"src/"
],
"exclude": [
"node_modules"
]
}
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'sass-loader'],
}
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'lib'),
}
};
I would really appreciate some help... I don't know what I have to modify to make it work...
Regards
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
