I have a project using ReactJS, Webpack, TailwindCSS, and when I run the build command, the CSS file built is TOO BIG:
Here is my postcss.config.js
const tailwindcss = require("tailwindcss");
module.exports = {
plugins: [
tailwindcss,
require("autoprefixer"),
require("cssnano")({
preset: "default",
}),
],
};
And here is my tailwind.config.js:
module.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx,vue}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors: {
greenLight: "#1db954",
greyDark: "#121212",
greyLight: "#282828",
greyLighter: "#282828",
backgroundLight: "rgba(40,40,40,0.4)",
},
fontFamily: {
custom: ["Circular Spotify Tx T Black"],
},
container: {
screens: {
mobile: "23rem",
},
},
},
},
variants: {
extend: {},
},
plugins: [],
};
And this is ```webpack.config.js
I have searched a lot, but can not figure it out! Thanks.
Related
I am building a library with vite, react and ant design.
The build command vite build runs fine without warnings, but when I run vite preview command, then I give an error. I do not know why this is happening.
[![enter image description here][1]][1]
index.b71761d7.js:4879 TypeError: jsxDevRuntime.exports.jsxDEV is not a function
at Provider (index.b71761d7.js:31334:48)
at Ch (index.b71761d7.js:3752:8)
at ck (index.b71761d7.js:6267:12)
at bk (index.b71761d7.js:5797:12)
at ak (index.b71761d7.js:5790:5)
at Tj (index.b71761d7.js:5773:7)
at Lj (index.b71761d7.js:5541:26)
at Jg (index.b71761d7.js:5389:52)
at lk (index.b71761d7.js:6631:3)
at index.b71761d7.js:6719:7
Please help me, thank you very much!
This is my vite.config.js file
import { defineConfig, loadEnv } from 'vite';
import react from '#vitejs/plugin-react';
export default ({ mode }) => {
// Load app-level env vars to node-level env vars.
console.log('Running on environment ' + mode);
process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
return defineConfig({
plugins: [
react({
babel: {
plugins: [['#babel/plugin-transform-react-jsx', { runtime: 'automatic' }]],
},
}),
],
resolve: {
alias: [{ find: /^~/, replacement: '' }],
},
css: {
preprocessorOptions: {
less: {
modifyVars: {
// 'primary-color': '#282F7E',
'primary-color': '#F58220',
// 'text-color': '#282F7E',
'btn-border-radius-base': '6px',
'btn-border-radius-sm': '6px',
'control-border-radius': '6px',
'tag-border-radius': '6px',
dark: true,
compact: true,
},
javascriptEnabled: true,
},
},
},
optimizeDeps: {
include: ['#ant-design/icons'],
},
server: {
port: 3711,
},
preview: {
port: 8711,
},
build: {
chunkSizeWarningLimit: 1000,
outDir: 'build',
},
});
};
[1]: https://i.stack.imgur.com/gw1Wf.png
Basically, every time that i create a TYPESCRIPT gatsby project, i get errors on the file gatsby-config.ts.
Errors are in bold font.
import type { GatsbyConfig } from "gatsby";
require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`,
});
const strapiConfig = {
apiURL: process.env.STRAPI_API_URL,
accessToken: process.env.STRAPI_TOKEN,
collectionTypes: ['article', 'company', 'author'],
singleTypes: [],
};
const config: GatsbyConfig = {
siteMetadata: {
title: ``,
siteUrl: `https://www.yourdomain.tld`
},
plugins: ["gatsby-plugin-sass", {
resolve: 'gatsby-plugin-google-analytics',
options: {
"trackingId": "portfolio-vanny-1"
}
}, "gatsby-plugin-image", "gatsby-plugin-react-helmet", "gatsby-plugin-mdx", "gatsby-transformer-remark", "gatsby-plugin-sharp", "gatsby-transformer-sharp", {
resolve: 'gatsby-source-filesystem',
options: {
"name": "images",
"path": "./src/images/"
},
***__key: "images"***
}, {
resolve: 'gatsby-source-filesystem',
options: {
"name": "pages",
"path": "./src/pages/"
},
**__key: "pages"**
},
{
resolve: `gatsby-source-strapi`,
options: strapiConfig,
}]
};
export default config;
It seems that those errors doesnt affect anything on my project but its weird, i dont even touch the code and it throws me those errors.
It is a project composed of Vite & React & antd.
I want to handle antd theme dynamically in vite.config.ts.
I would appreciate it if you could tell me how to modify less.modifyVars value in React component.
This is the current screen.
light state /
dark state
In dark mode, the style of the select component does not work properly.
import { getThemeVariables } from 'antd/dist/theme'
...
css: {
modules: {
localsConvention: 'camelCaseOnly'
},
preprocessorOptions: {
less: {
javascriptEnabled: true,
modifyVars: {
...getThemeVariables({
dark: true // dynamic
})
}
}
}
}
}
You need to import 'antd/dist/antd.less' instead of 'antd/dist/antd.css'
Install dependency for less npm add -D less. Vite will automatically catch it.
Use the following config:
css: {
preprocessorOptions:{
less: {
modifyVars: {
'primary-color': '#1DA57A',
'heading-color': '#f00',
},
javascriptEnabled: true,
},
},
},
It's been a while, but this is works for me now:
You need to make sure you import less on demand. I use plugin vite-plugin-imp to achieve. And then getThemeVariables should be work well.
import vitePluginImp from 'vite-plugin-imp';
import { getThemeVariables } from 'antd/dist/theme';
export default defineConfig({
plugins: [
// ...
vitePluginImp({
libList: [
{
libName: 'antd',
style: (name) => `antd/es/${name}/style`,
},
],
}),
],
resolve: {
alias: [
// { find: '#', replacement: path.resolve(__dirname, 'src') },
// fix less import by: #import ~
// https://github.com/vitejs/vite/issues/2185#issuecomment-784637827
{ find: /^~/, replacement: '' },
],
},
css: {
preprocessorOptions: {
less: {
// modifyVars: { 'primary-color': '#13c2c2' },
modifyVars: getThemeVariables({
dark: true,
// compact: true,
}),
javascriptEnabled: true,
},
},
},
});
Moreover: you can get more inspiration from here: vite-react/vite.config.ts
I'm trying to add this plugin, which is uses this webpack plugin to my craco config file, followed the guide but it's not working.
const CracoAlias = require('craco-alias');
const imageOptimizer = require('craco-image-optimizer-plugin');
module.exports = function ({ env }) {
return {
reactScriptsVersion: 'react-scripts',
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('postcss-focus-visible'),
require('autoprefixer'),
],
},
},
plugins: [
{
plugin: imageOptimizer,
// image-webpack-plugin options
options: {
mozjpeg: {
progressive: true,
quality: 65,
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.9],
speed: 4,
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75,
},
},
},
{
plugin: CracoAlias,
options: {
//CracoAlias options
},
},
],
};
};
The plugin is supposed to optimize the images, but it's not happening. Any ideas? Is it something wrong with my config file? Thanks.
Seems like it was a problem with react-scripts. Had to add the plugin manually like this:
const { getLoaders, loaderByName } = require('#craco/craco');
module.exports = {
overrideWebpackConfig: ({ webpackConfig, cracoConfig, pluginOptions }) => {
const config = { ...webpackConfig };
const urlLoaderCandidates = getLoaders(config, loaderByName('url-loader'));
const urlLoader = urlLoaderCandidates.matches.find(
m =>
m.loader &&
m.loader.test &&
(Array.isArray(m.loader.test)
? m.loader.test.some(r => r.toString().indexOf('jpe?g') >= 0)
: m.loader.test.toString().indexOf('jpe?g') >= 0)
);
if (!urlLoader) {
throw Error(
'could not find correct url-loader. did you change react-scripts version?'
);
}
const loader = urlLoader.loader;
loader.use = [
{
loader: loader.loader,
options: Object.assign({}, loader.options),
},
{
/**
* #see https://github.com/tcoopman/image-webpack-loader
*/
loader: 'image-webpack-loader',
options: pluginOptions,
},
];
delete loader.loader;
delete loader.options;
return config;
},
};
And then import the file instead of the package.
I'm using Tailwind with PostCSS and I'm trying to figure out why the variants are not working but the theme is.
postcss.config.js
module.exports = {
plugins: [require('tailwindcss'), require('autoprefixer')],
}
tailwind.config.js
module.exports = {
theme: {
extend: {
....
},
},
variants: {
extend: {
backgroundColor: ['checked'],
borderColor: ['checked'],
},
},
plugins: [],
}
Please help. Thank you.