Configure cssLess modifyVars with React.JS using SNOWPACK (not webpack) to work with AntDesign

So I’ve been trying to load .less files into my React.JS project. To get my … Read more Configure cssLess modifyVars with React.JS using SNOWPACK (not webpack) to work with AntDesign

So I’ve been trying to load .less files into my React.JS project. To get my AntDesign theming to work.
My stack: React.JS – Typescript – Snowpack. And want to work with AntDesign Theming, so I need to make the Less.modifyVars work.

I cannot find a clear tutorial to handle this, using Snowpack.
I have installed the snowpack plugin: snowpack-plugin-less, snowpack.config.js configuration:

plugins: [
 ['snowpack-plugin-less',
  {
    javascriptEnabled: true,
    modifyVars: {
      'primary-color': '#1DA57A',
      'link-color': '#1DA57A',
      'border-radius-base': '8px',
      'btn-primary-bg': '#1DA57A',
    },
  }
]]

I have less: 3.13.1 installed.
and added import ‘antd/dist/antd.less’; inside my App.tsx file.

Loading import ‘antd/dist/antd.css’; will update antDesign components correctly with styles.
But not with import ‘antd/dist/antd.less’;

I am sure there’s some configuration I am missing somewhere, but I just cannot figure it out.
A little assistance, maybe a complete example using my tech stack would be great. Thanks!

Source: React – Stack Overflow



Leave a Reply

Your email address will not be published. Required fields are marked *