Add sass/css modules to typescript react app

Question

In a new project, I need to add scss/css modules to a typescript/react app. I added "typings-for-css-modules-loader" to the project and webpack.config.dev.js like so : (here is the entire webpack.config.dev.js)

          {
        test: /\.css$/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('typings-for-css-modules-loader'),
            options: {
                importLoaders: 1,
                modules: true
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              // Necessary for external CSS imports to work
              // https://github.com/facebookincubator/create-react-app/issues/2677
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // React doesn't support IE8 anyway
                  ],
                  flexbox: 'no-2009',
                }),
              ],
            },
          },
        ],
      },{
          test: /\.scss$/,
          use: [
              require.resolve('style-loader'),
              require.resolve('sass-loader'),
              {
                  loader: require.resolve('typings-for-css-modules-loader'),
                  options: {
                      namedexport: true,
                      camelcase: true,
                      modules: true
                  }
              }
          ]
      },

When i add a test.scss file to my project, the compilation successfully creates a test.scss.d.ts which contains :

export interface ITestScss {
    'toto': string;
}

export const locals: ITestScss;

When i try to import this css in my project like so :

import styles from './scss/test.scss';

I get this error :

Module '"/home/cyprien/projets/test/typescript-sass-modules-boilerplate/src/scss/test.scss"' has no default export.

Finally, In the browser, i get this error :

Failed to compile

./src/scss/test.scss Module build failed: .toto{ ^ Invalid CSS after "e": expected 1 selector or at-rule, was "exports = module.ex" in /home/cyprien/projets/test/typescript-sass-modules-boilerplate/src/scss/test.scss (line 1, column 1)

Paleo · Accepted Answer · 2018-04-10 07:59:42Z

1

You need to use the plugin mini-css-extract-plugin. Here is an example of configuration with TypeScript and SASS SCSS (but without CSS modules neither PostCSS):

// webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {
  mode: "development",
  devtool: "source-map",
  resolve: {
    extensions: [".ts", ".js"]
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: {
          loader: "ts-loader"
        }
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin()
  ]
}

I hope you'll be able to adapt it.

answered Apr 10, 2018 at 7:59

Paleo

24k5 gold badges74 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

1252748 Over a year ago

Is it intentional that you use css-loader instead of typings-for-css-modules-loader. I cannot get either to work.

C Taque · Accepted Answer · 2019-05-14 15:00:13Z

Found this solution:

webpack config (dev), this is for less :

{
    test: /\.modules\.less$/,
    use: [{
        loader: 'style-loader' // creates style nodes from JS strings
    },{
        loader: 'typings-for-css-modules-loader',
        options:{
            modules:true,
            namedExport: true,
            camelCase: true,
            localIdentName:'[path][name]---[local]---[hash:base64:5]'
        }
    },{
        loader: 'less-loader',
        options: { javascriptEnabled: true }// compiles Less to CSS
    }]
}

then name your less file something.modules.less

import it in the js as so:

import * as styles from './something.modules.less';

and use it like this:

<div className={styles.yourClassName}></div>

Collectives™ on Stack Overflow

Add sass/css modules to typescript react app

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related