'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