react-typescript-scss.md

react-typescript-scss.md

Breif

This is a simple brief about typescirpt add scss loader.

Here are some resourse

• Best solution
• Discuss about ts load problem
• Use plugin to load scss with webpack
• Same issue on stackoverflow

In webpack

In webpack.module.rules

      {
        test: /\.s?css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'typings-for-css-modules-loader',
            options: {
              sass: true,
              modules: true,
              camelCase: true,
              namedExport: true,
              localIdentName: '[name]__[local]__[hash:base64:5]',
            }
          },
          { loader: 'sass-loader' },
        ]
      }

Add declare file

In the clint folder(or front end folder). Let declaration.d.ts to phase first

//Enable import the scss file for ts, prevent the can not find example.scss moudle
declare module '*.scss' {
  const content: any;
  export default content;
}

Load in scss

In company componet

import * as styles from './brand.scss'

Issue

When the webpack, run example.scss.d.ts will generate auto. Because delay the className={styles.SCSSCLASSNAME} may be unfound. Opening the example.scss.d.ts it will help to solve this problem