Generating compiled CSS from SASS for Component Library

[dan-kez]

This issue is a:

• Question / support request

Hello!

I'm using nwb to build a component library for my team. I've run into an issue where a third party component is primarily theme-able via less / sass. I would like to generate a compile css file for this sass in my es / lib directories. This would allow my library consumers to forgo installing / updating their webpack configs to support compiling sass files from the modules.

Some additional information:

• I am on "nwb": "0.21.x",
• My build command is: nwb build-react-component --copy-files --keep-proptypes

I have attempted to do the above with the nwb-sass plugin. That said, I have not had success in generating css file in either the es or lib directories.

My current webpack config in nwb.config.js

{
  type: 'react-component',
  npm: {
    esModules: true,
    umd: false,
  },
  babel: {
    plugins: [
      'jsx-control-statements',
      ['module-resolver', {
        root: ['.'],
        alias: {
          Components: './src/Components',
          Constants: './src/Constants',
          Assets: './src/Assets',
          Utils: './src/Utils',
        },
      }],
    ],
  },
  webpack: {
    rules: {
      babel: {
        test: /\.jsx?/,
      },
      sass: {
        modules: true,
        localIdentName: '[hash:base64:5]',
      },
    },
    styles: {
      sass: [
        {
          sass: {
            modules: true,
            localIdentName: '[hash:base64:5]',
            sourceMap: true,
          },
        },
      ],
    },
    extra: {
      resolve: {
        extensions: ['.js', '.jsx', '.json', '.scss'],
      },
      node: {
        process: false,
      },
    },
    aliases: {
      Components: path.resolve(__dirname, 'src/Components'),
      Constants: path.resolve(__dirname, 'src/Constants'),
      Assets: path.resolve(__dirname, 'src/Assets'),
      Utils: path.resolve(__dirname, 'src/Utils'),
    },
  },
};

I would sincerely appreciate an example on how to configure my config to generate a css file given scss file or otherwise.

EDIT: Looking into this further it looks like webpackBuild isn't even being called when building the es and lib directories. (see https://github.com/insin/nwb/blob/2c06dd4fd876c26e9ebfee5b1ad35950cd007c91/src/moduleBuild.js#L15 ).

I don't have any interest in building a full UMD build but I do require the css styling. I'm assuming this would require a PR unless I've missed something.

[A11oW]

What about, if create task for nwb like as 'demo', which will be compile styles through webpack?

[smurrayatwork]

I'm having similar issues, here. @insin Any thoughts/comments on this issue? Thanks!

[RavenHursT]

@insin is this feature something that can be configured/implemented w/ the current architecture of nwb? Seems like there's a good amount of people trying to do this w/ components, but not much in the way of answers.... :-/

[samrith-s]

I'm struggling with this as well. I have a table component which heavily relies on CSS to style itself. So, I would like a way to package the stylesheet (SCSS) with the ES and Lib.

[aviskarkc10]

This might solve your problem #486

[YwainZ]

@aviskarkc10

This might solve your problem #486

That's a good solution, but when i use modifyVars in nwb.config.js, It doesn't seem to work

nwb.config.js

less: {
        javascriptEnabled: true,
        modifyVars: {
          themeFile: process.argv.includes('--params') ? path.resolve(__dirname, './src/theme/themes.less') : null,
        },
      },

home.less

@import (optional) '@{themeFile}'

[aviskarkc10]

I am sorry I can't help you on this @Clairezyw. I used nwb in one pet project of mine for which I needed to compile sass and opened the PR because there wasn't any information out there. Maybe a maintainer of this project can help you. But this thread has been pretty inactive.

@insin

[busyzz-1994]

@samrith-s how to solve this problem?

I'm struggling with this as well. I have a table component which heavily relies on CSS to style itself. So, I would like a way to package the stylesheet (SCSS) with the ES and Lib.

[samrith-s]

@busyzz-1994 I stopped using this library 😄