I'm working on a React project with Vite and Styled components. For better class names, I use the plugin vite-plugin-babel-macros, which works. But it displays the file name inside the class, which I'd like to hide, so from:
<h1 class="Homepage__H1-sc-1el87d5-0 frwzme"></h1>
to:
<h1 class="H1-sc-1el87d5-0 frwzme"></h1>
With create-react-app I have a file babel-plugin-macros.config.js where I add this code:
const config = {
fileName: false,
displayName: true,
meaninglessFileNames: ["index", "styles"],
}
But this does not work. I tried to add this in my vite.config.ts, but same problem:
export default defineConfig({
plugins: [
react({
babel: {
plugins: [
[
"babel-plugin-styled-components",
{
fileName: false,
displayName: true,
meaninglessFileNames: ["index", "styles"],
},
],
],
},
}),
macrosPlugin(),
],
})
Thanks for your help!
Related
I am using rollup for configuring my React build. In one of the components, I am lazyloading svg file and integrating it to the component JSX using the svgr plugin. I am facing an issue as my svg file is currently inside the same component where it is getting consumed. After build, its SVG path is changing but not changing at the place where it is imported into the component.
My component file:
ImportedIconRef.current = await import(`./svg/${icon}.svg`).then((h) => {
return h.default;
});
Code folder:
Src
|- components
|- Icon
|- svg
|- index.tsx
Build Folder:
Build
|- Assets
|-svg
|- index.js
After Build I am getting an error for unable to find svg on path './svg'
My rollup config:
export default {
input: process.env.STORYBOOKMODE === 'public' ? 'src/publicIndex.ts' : 'src/index.ts',
output: [
{
file: packageJson.main,
format: 'cjs',
sourcemap: true,
globals: {
react: 'React',
'react-dom': 'ReactDOM'
},
exports: 'named'
},
{
file: packageJson.module,
format: 'esm',
sourcemap: true,
globals: {
react: 'React',
'react-dom': 'ReactDOM'
},
exports: 'named'
}
],
external: ['react', 'react-dom', 'react-is'],
plugins: [
resolve(),
image({
include: /\.(gif)$/
}),
typescript({
useTsconfigDeclarationDir: true
}),
postcss({
extract: 'main.css',
minimize: 'main.css'
}),
svgr({
svgoConfig: {
plugins: [{ removeTitle: false }, { removeViewBox: false }]
}
}),
copy({
targets: [
{
src: 'src/components/Icon/svg',
dest: 'build/assets'
}
]
})
]
}
Here is the docs link I tried: https://tailwindcss.com/docs/content-configuration#configuring-source-paths
This is my config file:
module.exports = {
content: ['./src/**/*.{js, jsx, ts, tsx}', './public/index.html'],
theme: {
extend: {},
},
plugins: [],
};
I have also gone through this answer: Tailwind utility classes only working in css file and not inline
I tried editing the config file like this:
module.exports = {
content: [
'./src/**/*.{js, jsx, ts, tsx}',
'./public/index.html',
'./src/components/**/*.{html,js,jsx}',
],
theme: {
extend: {},
},
plugins: [],
};
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 have a design system that is built on top of Material-ui version 5. I use rollup as my bundler.
In one of of the custom components, I import an icon from Mui5 import { Search } from "#material-ui/icons"
When I build using rollup I get the following error which I'm unsure how to fix:
!] Error: Could not load E:\project\node_modules\#material-ui\icons\esm\TransitEnterexitSharp.js
(imported by node_modules\#material-ui\icons\esm\index.js): EMFILE: too many open files, open 'E:\project\node_modules\#material-ui\icons\esm\TransitEnterexitSharp.js'
What config am I missing from rollup? It has the following config:
export default {
input: "src/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true
},
{
file: packageJson.module,
format: "esm",
sourcemap: true
}
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
babel({
plugins:
[
// comes from https://material-ui.com/guides/minimizing-bundle-size/#option-2
[
'babel-plugin-import',
{
'libraryName': '#material-ui/core',
'libraryDirectory': 'esm',
'camel2DashComponentName': false
},
'core'
],
[
'babel-plugin-import',
{
'libraryName': '#material-ui/icons',
'libraryDirectory': 'esm',
'camel2DashComponentName': false
},
'icons'
]
],
exclude: 'node_modules/**',
runtimeHelpers: true
}),
typescript({ useTsconfigDeclarationDir: true }),
svgr(),
image(),
copy({
targets: [
{
src: "package.json",
dest: "dist"
}
]
})
]
};
I have also tried playing with umidbekk/babel-plugin-direct-import but to no avail.
Turns out this was fixed in Rollup v2.53.0 that referenced my exact issue https://github.com/rollup/rollup/pull/4170#issue-684709217
I'm using the ant design library for React. I've created a .webpackrc.js file as seen below.
const path = require('path');
export default {
entry: 'src/index.js',
extraBabelPlugins: [['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }]],
env: {
development: {
extraBabelPlugins: ['dva-hmr'],
},
},
externals: {
'#antv/data-set': 'DataSet',
},
alias: {
components: path.resolve(__dirname, 'src/components/'),
},
ignoreMomentLocale: true,
theme: './src/theme.js',
html: {
template: './src/index.ejs',
},
lessLoaderOptions: {
javascriptEnabled: true,
},
disableDynamicImport: true,
publicPath: '/',
hash: true,
};
I'm trying to add http basic auth to the webpack server which prompts users for a username and password. I've seen some examples with webpack.config.js, but not with .webpackrc.js. New to webpack so any examples would be appreciated.