Add FAQ to use CSS modules

[DavidHenri008]

Hi I would like to suggest adding a FAQ entry to describe briefly which modifications should be done to package.json and the webpack.config.xxx.js files to handle css modules properly.

Thanks.

[coryhouse]

PR welcome. :)

[DavidHenri008]

Hi @coryhouse I am trying to add the css module on my side and most of the functionalities are working. However, there is one little detail that never works: the class name transformation. As you know the css-loader is used to manage the css module class name transformation according to the localIndentName option. In my case the name of my classes is always a hash number... it never follows the localIndentName pattern. I know it is weird, but it seems to be related with react-slingshot or more precisely with the combination of webpack plugins used. But I can't figure which combination is wrong, or in other words which plugins overrides the css-loader renaming. Thanks.

[kwelch]

Does #236 help at all? I have proposed this before and had it working successfully. Unfortunately, it has been a while so I am unsure if it was properly transforming names like you stated.

[DavidHenri008]

Thanks @kwelch your fork help me realized taht I was using the wrong property... I used localIndentName instead of localIdentName!

[kwelch]

I am going to open this as I still believe this is something that would be useful for the docs and that PR I proposed would be a good starting point on what changes are necessary.

[jomadoye]

I'm not sure of how to create the FAQ, but the below should work, in-case anyone needs it.

{
        test: /(\.css|\.scss|\.sass)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: {
                localIdentName: '[name]__[local]___[hash:base64:5]',
              },
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [require('autoprefixer')],
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                includePaths: [path.resolve(__dirname, 'src')],
              },
              sourceMap: true,
            },
          },
        ],
        include: /\.module\.css$/,
      },
      {
        test: /(\.css|\.scss|\.sass)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [require('autoprefixer')],
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                includePaths: [path.resolve(__dirname, 'src')],
              },
              sourceMap: true,
            },
          },
        ],
        exclude: /\.module\.css$/,
      },