Reactgo: Integration with third-party libraries (css)

[choonkending]

Document it!

[montezume]

Do you still need documentation for this?

[choonkending]

I think it would be good to document it given people have raised this issue
a couple of times

On Sun, 15 Jan 2017 04:04 Malcolm Laing [e-mail] wrote:

Do you still need documentation for this?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/reactGo/reactGo/issues/801#issuecomment-272637167,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADnMbQxh2asyimi-qMFk84M-ewN1m114ks5rSQAigaJpZM4LdT-P
.

[mwoodsmall]

Documentation on this would help quite a bit. I've been struggling to get leaflet's css to not be included in the CSS module.

[montezume]

@mwoodsmall I can make a little example / writeup tomorrow when I'm at work if you're still stuck on this. Basically what I did was made another test in the webpack dev and prod configs for files ending in global, and imported the css normally.

[mwoodsmall]

@montezume Yea I tried something similar to exclude leaflet from the modules:

module: {
      loaders: commonLoaders.concat({
        test: /^((?!leaflet).)*css/,
        loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
      }, {
       test: /leaflet.css$/,
       loader: 'style!css'
      })
    }

Somthing wasn't quite right though because I was getting the following error:

ERROR in ./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/css-loader/lib/css-base.js
Module build failed: Unknown word (7:2)

  5 | // css base code, injected by the css-loader
  6 | module.exports = function() {
> 7 |   var list = [];
    |   ^
  8 | 
  9 |   // return the list of modules as css string

[montezume]

@mwoodsmall This is what I did

In app/css/global-styles/globalStyles.css

/*
Here you can @import css from your npm libaries :)
*/

@import '../../../node_modules/slick-carousel/slick/slick.css';

in webpack.config.dev-client.js

    module: {
      loaders: commonLoaders.concat([
        {
          test: /(globalStyles\.css)$/,
          loader: 'style!css!postcss-loader'
        },
        { test: /\.css$/,
          exclude: [
            path.join(__dirname, '..', 'app/css/global-styles')
          ],
          loader: 'style!css?module&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
        }
      ])
    },

and finally in webpack.config.prod.js

commonLoaders = commonLoaders.concat([
  {
    test: /(globalStyles\.css)$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
  },
  {
    test: /\.css$/,
    exclude: [
      path.join(__dirname, '..', 'app/css/global-styles')
    ],
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader?module!postcss-loader')
  }
]);

Hope this helps :)

[andrewmoon1]

@montezume Can you replicate this with the new file structure? I am attempting to import codemirror's css and the styles aren't applying even though I can inspect the file in the browser.

In app/css/main.css

@import '../../node_modules/codemirror/lib/codemirror.css';

In webpack/rules/css.js

return {
    test: /\.css$/,
    exclude: [
            path.join(__dirname, '..', 'app/css/main')
    ],
    use: browser ? browserLoaders : serverLoaders,
    include: PATHS.app
  };

Thanks

[bellatrix1001]

@andrewmoon1 Have you been able to figure this one out? Thanks for any help!

[hassaanz]

It would be great to have this documented., I have been trying to do the same thing but I am unable to include an externally packaged css file.

[GGAlanSmithee]

There seems to be a need for this so, so let's try to get it done. It would fit naturally in https://github.com/reactGo/reactGo/blob/master/docs/css.md. If anyone would like to contribute, that'd be great!

[hassaanz]

Hi. Just wanted to know how can I do this? I can help contribute to the docs if I can get it working.

[slavab89]

I think that in the end it depends on the library that you're using.
For example, when using react-select you cant use the PostCSS loader with modules turned on since it will change the css class to some other string while react-select expects the class names to stay the same here. So for that library you would need to use a simple css-loader that doesnt really do anything other than load the file, Or do something like: copy the css styles to your project and load it without loaders: import '!style-loader!css-loader!./css/unstyled/react-select.css';

For react-flexbox-grid, it is possible to use css-loader with modules turned on cause it is built to support that. This is how i do it on my end

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = ({ production = false, browser = false } = {}) => {
  const createCssLoaders = embedCssInBundle => ({
    loader: embedCssInBundle ? 'css-loader' : 'css-loader/locals',
    options: {
      modules: true
    }
  });

  const createBrowserLoaders = extractCssToFile => loader => {
    if (extractCssToFile) {
      return ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: loader
      });
    }
    return [{ loader: 'style-loader' }, loader];
  };

  const serverLoaders = createCssLoaders(false);
  const browserLoaders = createBrowserLoaders(production)(createCssLoaders(true));

  return {
    test: /\.css$/,
    use: browser ? browserLoaders : serverLoaders,
    include: /flexboxgrid2/
  };
};

In the end i would suggest to use the PostCSS loader for the project's CSS files and use different loader configuration for different modules.