How to use with imports from a module?

[webbertakken]

Hey @JoseRFelix

I found your post at the Ant Design repository and to me this approach looks nice. Thank you for making this.

Currently I'm trying to figure how to use this while importing styles from a package, like that of Ant Design? Particularly; how will a map of strings make it possible to resolve imports and package them at build time?

[JoseRFelix]

Unfortunately, it can't resolve imports on the string map. What you would do is extract the styles in a CSS file and within the map point to the location of where it is located. Do mind the styles should be inside the public folder so they can be available inside the browser.

You could do this using Webpack, but in my opinion, is too convoluted and would require to create a plugin just for that, also you would have to compile the styles on each change. I am going to write the solution for this on my blog post, however, since you need it now I will tell you how to.

I solved this problem by using Gulp. I create Less stylesheet with imports from AntD and any variable I want to modify, which means I can create whichever theme I want, pretty scalable in my opinion. Furthermore, I use Gulp to look for every file that has -theme.less, compile the less stylesheet, minify it, and write it inside my public folder.

Here is the Gulp code:

const gulp = require('gulp')
const gulpless = require('gulp-less')
const postcss = require('gulp-postcss')
const debug = require('gulp-debug')
var csso = require('gulp-csso')
const autoprefixer = require('autoprefixer')
const NpmImportPlugin = require('less-plugin-npm-import')

gulp.task('less', function () {
  const plugins = [autoprefixer()]

  return gulp
    .src('src/theme/antd/*-theme.less')
    .pipe(debug({title: 'Less files:'}))
    .pipe(
      gulpless({
        javascriptEnabled: true,
        plugins: [new NpmImportPlugin({prefix: '~'})],
      }),
    )
    .pipe(postcss(plugins))
    .pipe(
      csso({
        debug: true,
      }),
    )
    .pipe(gulp.dest('./public'))
})

I would run this script every time I update AntD, however, you could run it after any build using post hook

As said before, inside src/theme/antd I create Less stylesheets which represent themes. Here is the content of the dark theme:

@import '~antd/lib/style/color/colorPalette.less';
@import '~antd/dist/antd.less';
@import '~antd/lib/style/themes/dark.less';
@import './default-vars-override.less';

@component-background: #303030;
@body-background: #303030;
@popover-background: #303030;
@border-color-base: #6f6c6c;
@border-color-split: #424242;
@table-header-sort-active-bg: #424242;
@card-skeleton-bg: #424242;
@skeleton-color: #424242;
@table-header-sort-active-bg: #424242;

To use in your theme map you just point to your public folder. If you are using CRA do it this way:

const themes = {
  dark: `${process.env.PUBLIC_URL}/dark-theme.css`,
  light: `${process.env.PUBLIC_URL}/light-theme.css`,
}

I hope this helped. Cheers 🚀

[hadnet]

@JoseRFelix can I use sass files? It would be nice if this package could support scss.

[equinusocio]

I have the same issue. My theme files are provided as npm package, and i need to import them from node_modules not as public assets. Embedding the styles instead of using the link as alternative option could fix this.