intoli / antd-scss-theme-plugin

A Webpack plugin for customizing Ant Design with an SCSS theme file and using Ant Design's compiled variables in SCSS files throughout your project.
https://intoli.com/blog/antd-scss-theme-plugin/
Other
202 stars 81 forks source link

When used this plugin with sass-loader (version ^10.0.2) and craco is giving Cannot find module 'sass-loader/dist/importsToResolve' when used in webpack config #91

Open vjagetiya-jeavio opened 3 years ago

vjagetiya-jeavio commented 3 years ago

Reference of ticket opened with sass-loader, which recommended to open issue with antd-scss-theme-plugin

https://github.com/webpack-contrib/sass-loader/issues/890

Refer following for craco.config.js

`const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin'); const AntdScssThemePlugin = require('antd-scss-theme-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const path = require('path'); const isProduction = process.env.NODE_ENV === 'production';

module.exports = { babel: { plugins: [ ['import', { 'libraryName': 'antd', 'style': true }] ] }, webpack: { configure: { module: { rules: [ { test: /.s(a|c)ss$/, use: [ !isProduction ? 'style-loader' : MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { sourceMap: !isProduction, modules: true }, }, AntdScssThemePlugin.themify({ loader: 'sass-loader', options: { sourceMap: !isProduction, implementation: require('node-sass') }, }), ], }, { test: /.less$/, use: [ { loader: 'style-loader', options: { sourceMap: !isProduction, }, }, { loader: 'css-loader', options: { importLoaders: 1, sourceMap: !isProduction, }, }, AntdScssThemePlugin.themify('less-loader'), ], }, ] }, plugins: [ new AntdDayjsWebpackPlugin({ replaceMoment: true, preset: 'antd' }), new AntdScssThemePlugin(path.join('./theme.scss')), new MiniCssExtractPlugin({ filename: !isProduction ? '[name].css' : '[name].[hash].css', chunkFilename: !isProduction ? '[id].css' : '[id].[hash].css' }) ] }, } };`