React component library - getting stylus to work

Question

I am using this library https://github.com/facebook/create-react-app

I am trying to get stylus work

What i have done so far is

npm install --save-dev stylus

and

npm install --save-dev stylus-loader

And then added to the package.json ,

"build-css": "stylus src/ -o src/",
"watch-css": "npm run build-css && stylus src/ -o src/ --watch --recursive",

as stated in the library's documentation

There is no explicit webpack file in this library

Answer 1

As of Oct 2019, I found previous answers outdated. Please follow my instructions for up to date 'create-react-app' version.

1. Run yarn eject which reveals all configs from 'react-scripts' and adds dependencies (you can't revert it)

2. Reinstall npm modules rm -rf node_modules && yarn install (cause of bug https://github.com/facebook/create-react-app/issues/6099)

3. Install 'stylus' and 'stylus-loader' packages yarn add stylus stylus-loader

4. Open config/webpack.config.js

   a. Find SASS loader block:

            {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent
                },
                'sass-loader'
              )
            },

b. After it add:

            // Adds support for Stylus (using .styl extension).
            {
              test: /\.styl$/,
              exclude: /\.module\.styl$/,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap
                },
                'stylus-loader'
              ),
              sideEffects: true
            },
            // Adds support for CSS Modules, but using Stylus
            // using the extension .module.styl
            {
              test: /\.module\.styl$/,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent
                },
                'stylus-loader'
              )
            },

Answer 2

1. Run npm run eject, which adds all configs and dependencies to project. You can't revert it
2. npm i --save-dev stylus stylus-loader
3. Add configuration to webpack for stylus (you must update all configs: development, production)

webpack.config -> module -> rules -> oneOf

developement - add new rule

 {
    test: /\.styl$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1,
        },
      }, {
        // postcss-loader и autoprefixer are already in create-react-app
        loader: 'postcss-loader',
        options: {
          plugins: () => [
            autoprefixer({ browsers: ['>= 10%', 'last 2 versions'] })
          ],
          sourceMap: true,
        },
      }, {
        loader: 'stylus-loader',
        options: {
          sourceMap: true,
        },
      }],
  },

production - update rule for styles

{
    test: /\.(styl|css)$/,
    loader: ExtractTextPlugin.extract(
      Object.assign(
        {
          fallback: {
            loader: require.resolve('style-loader'),
            options: {
              hmr: false,
            },
          },
          use: [
            {
              loader: require.resolve('css-loader'),
              options: {
                importLoaders: 1,
                minimize: true,
                sourceMap: shouldUseSourceMap,
              },
            },
            {
              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',
                  }),
                  cssMQPacker(),
                ],
              },
            },
            {
              loader: require.resolve('stylus-loader')
            }
          ],
        },
        extractTextPluginOptions
      )
    ),
    // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},

Answer 3

I had the same problem and I found this solution which you can check on the link below, but is also here transcribed for reference :

Solution 1

How to use Stylus with Create React App

First, you’ll need to install Stylus if you haven’t already:

npm install stylus -g

Next, you need to create your new React Application:

create-react-app my_app
cd my_app
mkdir src/static/stylus

Now you need to install the npm-run-all package:

npm install --save-dev npm-run-all

For the final step, you will have to remove the build and start scripts from package.json and replace them with the following:

"build-css": "stylus -c src/static/stylus/ --out src/static/css",
"watch-css": "npm run build-css && stylus -c -w src/static/stylus/ --out src/static/css",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js"

Now you can run your app normally with

npm start

and have all of your stylus scripts compiled every time your app reloads.

Solution 2

I did not try this one but maybe it's also worthy to check :

create-react-app-stylus

Basically install the npm module :

npm install create-react-app-stylus --save-dev

Then replace your start and build scripts in your package.json.

"scripts": {
  "start": "react-scripts-with-stylus start path/to/main.styl",
  "build": "react-scripts-with-stylus build path/to/main.styl",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
},

Conclusion:

I got it working fine, now I'm just trying to find a way to make it work within each component's folder.

Answer 4

In order for you do get the webpack file using create react app, you need to eject the app. (https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject) But note once you eject you can't revert the app back.

Hopefully this helps you out!