CODEWITHSUNDEEP
javascriptreactjswebpackstorybook
junednimble
junednimble

Reputation: 1

Storybook with React, TypeScript and SASS

This is my webpack.config.js in .storybook folder

const path = require('path');
const TSDocgenPlugin = require('react-docgen-typescript-webpack-plugin');
module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('awesome-typescript-loader')
  });
  defaultConfig.plugins.push(new TSDocgenPlugin());
  defaultConfig.resolve.extensions.push('.ts', '.tsx');
  return defaultConfig;
};

This is my tsconfig.json config file

{
  "compilerOptions": {
    "outDir": "build/lib",
    "module": "commonjs",
    "target": "es5",
    "lib": ["es5", "es6", "es7", "es2017", "dom"],
    "sourceMap": true,
    "allowJs": false,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "baseUrl": "src",
    "types": ["node"]
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "declaration": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "include": ["src/**/*", "types/**/*"],
  "exclude": ["node_modules", "build", "scripts"]
}

when i try to import any scss file in my any react component i got module not found error.

import style from './Button.scss'

Please guide me one how to configure webpack.config.js to support scss import in my tsx files

Upvotes: 0

Views: 1529

Answers (1)

Sofiane G.
Sofiane G.

Reputation: 173

Never did with TypeScript, but I guess you'd have to push something like this to your rules:

  {
    test: /\.scss$/,
    use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }],
  },

So your webpack.config.js would look like:

const path = require('path');
const TSDocgenPlugin = require('react-docgen-typescript-webpack-plugin');
module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('awesome-typescript-loader')
  });
  defaultConfig.module.rules.push({
    test: /\.scss$/,
    use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }],
  });
  defaultConfig.plugins.push(new TSDocgenPlugin());
  defaultConfig.resolve.extensions.push('.ts', '.tsx');
  return defaultConfig;
};

Don't forget to add the loaders to your package.json

Upvotes: 2

Related Questions