babel-plugin-react-css-modules icon indicating copy to clipboard operation
babel-plugin-react-css-modules copied to clipboard

Webpack 1.14 and Sass-loader

Open viksit opened this issue 7 years ago • 0 comments

Is webpack 1.x and sass-loader supported? This is my configuration,

 // Process JS with Babel.
      {
        test: /\.(js|jsx)$/,
        include: paths.appSrc,
        loader: 'babel',
        query: {

          // This is a feature of `babel-loader` for webpack (not Babel itself).
          // It enables caching results in ./node_modules/.cache/babel-loader/
          // directory for faster rebuilds.
          cacheDirectory: true,
          plugins: [
            'transform-react-jsx',
            [
              'react-css-modules',
              {
                "generateScopedName": "MYCOMP___[local]",
                "filetypes": {
                  ".scss": "postcss-scss"
                }
              }
            ]
          ]
        }
      },
      {
        test: /\.scss$/,
        include: path.resolve(__dirname, './stylesheets/sass'),
        loaders: [
          'style-loader?{"sourceMap":true,"attrs":{"id":"mycomp-style-tag"}}',
          'css-loader?modules=true&importLoaders=1&localIdentName=MYCOMP___[local]',
          'sass-loader?modules=true&importLoaders=1&localIdentName=MYCOMP___[local]',
          'autoprefixer-loader'
        ]
      },

and this is what package.json contains,


 "devDependencies": {
    "autoprefixer": "6.7.2",
    "node-sass": "^3.8.0",
    "sass-loader": "^4.0.0",
...
    "postcss-loader": "1.2.2",
    "postcss-scss": "^0.4.1",
...

Without sass-loader, my CSS and everything works fine. As I've tried to switch to use sass, I can see the CSS itself getting generated. But "styleName" is never defined.

That is, there is a tag in HEAD, but in the react component, all the elements don't get the right prefix.

What would you suggest doing?

viksit avatar Mar 21 '17 02:03 viksit