I am using customize-cra to override antd less variable but it creates multiple duplicate CSS files on build.
As mentioned in antd docs https://ant.design/docs/react/use-with-create-react-app#Advanced-Guides
if I use default import of CSS like this
#import '~antd/dist/antd.css';
it produces only 1.5MB(Including my custom CSS) of CSS files after the build.
Then I remove #import '~antd/dist/antd.css';
And i used customize-cra , like this code.
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const overrideVariables = require('./src/styles/overrideVariables');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: overrideVariables,
}),
);
This produces 6MB(Including my custom CSS) for CSS files after the build.
Am I am using it wrong or any other solution for this?
I'd recommend using craco. There is craco-antd plugin that works great and does exactly what you need.
craco.config.js
module.exports = {
plugins: [
{
plugin: require('craco-antd'),
options: {
lessLoaderOptions: {
noIeCompat: true
}
}
}
]
};
And then you can add your variables in antd.customize.less
#primary-color: #1da57a;
#link-color: #1da57a;
Related
I was trying to reduce the size of my CSS file using Tailwind's in-house compiler. This is my config file:
module.exports = {
content: ["./pages/*.html", "./components/**/*", "./src/*"],
mode: "jit",
plugins: [
require("tailwindcss"),
require("tw-elements/dist/plugin"),
require('tailwind-scrollbar')({ nocompatible: true }),
function ({ addVariant }) {
addVariant("child", "& > *");
addVariant("child-hover", "& > *:hover");
},
],
},
};
I have checked that the directories specified in content don't contain any hidden classes, however, it seems that Tailwind includes every class from the package tw-elements and doesn't purge them.
Is there any way how I can get a clean CSS file?
Many thanks for your help!
It is possible to reduce the size of your CSS file using Tailwind's in-house compiler. You can add the purge option to your Tailwind configuration file. Additionally, you can use the whitelist option to specify a list of classes that should not be purged. For example:
module.exports = {
content: ["./pages/*.html", "./components/**/*", "./src/*"],
mode: "jit",
purge: {
content: ['./pages/*.html', './components/**/*', './src/*'],
whitelist: ['tw-elements']
}
....
}
How can I remove VS Code Unused CSS selector warning? This warning is in all files where i use <style lang="scss">. I know that I don't use .btn class in some components, but I want this class as global css.
my svelte.config.js:
const config = {
onwarn: (warning, handler) => {
const { code, frame } = warning;
if (code === "css-unused-selector")
return;
handler(warning);
},
preprocess: [
preprocess({
defaults: {
style: 'scss'
},
postcss: true,
scss: {
prependData: `#import 'src/scss/global.scss';`
}
})
],
};
Please can someone help me?
If you use prependData that means you add the import to every component where you use styles. This is not what you want, therefore remove this setting. What you want is to import this file once so it's available globally. This can be done by just importing it inside the script tag, SvelteKit (or rather: Vite) can handle style imports.
Inside your root __layout.svelte file, add
<script>
import 'path/to/your/global.scss';
</script>
I am trying to add Tailwind.css to a Vue.js project. There are a lot of resources on how to do this, most of them following the same path as this video. To make sure I was in the same conditions as in the video, I created a Vue app from scratch, using vue-cli with the default presets. After this step, I did the following :
npm install tailwind.css
create src/styles/tailwind.css
adding the following to the css file:
#tailwind base;
#tailwind components;
#tailwind utilities;
call npx tailwind init to create a tailwind.config.js file at the root of the project
create postcss.config.js at the root of the project, and add the following to this file:
module.exports = {
plugins: [require("tailwindcss"), require("autoprefixer")],
};
add a custom color to the tailwind.config.js file :
module.exports = {
theme: {
colors: {
"awesome-color": "#56b890",
},
extend: {},
},
variants: {},
plugins: [],
};
adding a simple <p> element to the HelloWorld.vue component generated by vue-cli
trying to style it using Tailwind classes
Finally, here is the problem: I can apply some classes like bg-awesome-color or text-xl and have them render properly, but a lot other classes won't work.
For instance, removing those classes and trying instead bg-black, bg-orange-500, or text-orange-500 has strictly no effect. Did I do something wrong? Would that be a problem of compatibility between Vue.js and Tailwind.css?
I do not know if this is related, but I also noticed that after adding Tailwind.css, the Vue logo that used to be centered in the original vue-cli template was now aligned left in the page.
Thank you very much for any help!
If You want to keep original content, then you should put this inside "extend".
module.exports = {
theme: {
extend: {
colors: {
"awesome-color": "#56b890",
},
}
},
variants: {},
plugins: [],
};
Read more at: https://tailwindcss.com/docs/configuration/
I got the answer from a maintainer of Tailwind.css after posting an issue. I actually misplaced the colors object in tailwind.config.js, causing it to override all existing colors with mine, thus actually removing all the existing ones. Here is the correct way to add / override a color without removing all the original ones :
module.exports = {
theme: {
extend: {
colors: {
"awesome-color": "#56b890",
},
},
},
variants: {},
plugins: [],
};
The same thing happened to me, and I spent hours trying to understand why my custom styles weren't working, your error may be in the postcss.config.js, make sure when importing tailwind.config.js you are calling correctly, I leave a couple of examples:
// postcss.confing.js
const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");
module.exports = {
plugins: [
tailwindcss("./tailwind.config.js"), // name your custom tailwind
...
],
};
// postcss.confing.js
module.exports = {
"plugins": [
require('tailwindcss')('tailwind.config.js'), // name your custom tailwind
require('autoprefixer')(),
]
}
In both cases it solved the problem for me, I hope it will help you.
You have to install tailwindcss with vue-tailwind.
Run npm install tailwindcss.
For more information, you can go here https://tailwindcss.com/docs/guides/vite
I'm trying to implement a kind of css theming in an angular 4 project. We use webpack 3 for bundling. The product is intended to be used by several companies and has to look according to their brandbooks. So we need themes.
We gonna have several builds, but we don't want to have several versions of code. All themes should remain in the same codebase. The differences are minimal: colors, icons, fonts — everything may be changed in css.
I have thought of several ways to do it, the most obvious would be to implement theming via :host-context for components and change the class of body by changing environment variable for webpack. With such method we will heve every theme inside our bundle, which is not good. Maybe there's another way?
I wonder if it is possible to have webpack load not the css file it is asked for. Instead it could look for another file by pattern, and if it exists, use that file instead of original one. Or load both files.
For example, we have a button.component.ts which imports button.component.css. If we don't tell webpack to use any theme, it works as usual. But if we do, it tries to read button.component.theme-name.css in the same directory. If that file exists, webpack imports it instead (or altogether with) the default file.
That's basically what I'm trying to do. I guess, the same mechanism would be useful for html templates in angular.
Is there a plugin to do such magic? Or maybe some sophisticated loader option? If you have another way to solve my task — feel free to drop a comment!
I created a loader which can append or replace the content of a loaded file with the content of its sibling which has a chosen theme's title in its name.
TL;DR
Create a file with loader.
Use it in webpack config.
Run webpack in THEME=<themeName> evironment.
theme-loader.js
const fs = require('fs');
const loaderUtils = require('loader-utils');
module.exports = function (mainData) {
const options = loaderUtils.getOptions(this);
let themeName = options.theme;
let mode = options.mode;
if (themeName) {
// default mode
if (!Object.keys(transform).includes(mode)) {
mode = 'replace';
}
// fileName.suffix.ext -> fileName.suffix.themeName.ext
const themeAssetPath = this.resourcePath.replace(/\.([^\.]*)$/, `.${themeName}.$1`);
const callback = this.async();
// for HMR to work
this.addDependency(themeAssetPath);
fs.readFile(themeAssetPath, 'utf8', (err, themeData) => {
if (!err) {
callback(null, transform[mode](mainData, themeData));
} else if (err.code === 'ENOENT') {
// don't worry! if it's not here then it's not needed
callback(null, mainData);
} else {
callback(err);
}
});
} else {
return mainData;
}
};
const transform = {
// concat theme file with main file
concat: (mainData, themeData) => mainData + '\n' + themeData,
// replace main file with theme file
replace: (mainData, themeData) => themeData
};
A piece of sample webpack.config.js to use this handmade loader:
resolveLoader: {
modules: [
paths.libs, // ./node_modules
paths.config // this is where our custom loader sits
]
},
module: {
rules: [
// component styles
{
test: /\.css$/,
include: path.join(paths.src, 'app'),
use: [
'raw-loader',
// search for a themed one and append it to main file if found
{
loader: 'theme-loader',
options: {
theme: process.env.THEME,
mode: 'concat'
}
}
]
},
// angular templates — search for a themed one and use it if found
{
test: /\.html$/,
use: ['raw-loader',
{
loader: 'theme-loader',
options: {
theme: process.env.THEME,
mode: 'replace'
}
}
]
}
]
}
For example, an app.component.css:
:host {
background: #f0f0f0;
color: #333333;
padding: 1rem 2rem;
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
}
nav {
/* ... */
/* something about nav element */
/* ... */
}
header {
/* ... */
/* pile of styles for header */
/* ... */
}
To implement dark theme we don't need to change all that flex and padding staff and maybe nav and header don't have their own background and font color settings. So we'll just have to override host element style. We create app.component.dark.css:
:host {
background: #222222;
color: #e0e0e0;
}
The we run webpack with environment variable THEME set to dark. The loader takes a request to process app.component.css, tries to load app.component.dark.css and voila! Themed css is appended to the end of resulting file. Because of cascade,
if multiple competing selectors have the same importance and specificity, … later rules will win over earlier rules (MDN).
For HTML we don't have such method. So we'll have to rewrite our template completely. Hopefully, you won't need to do it too often. I my case, I wanted to change like header and footer to fit the cutomer's branding demand.
This was my first attempt to create a webpack loader, please leave a comment if you see a problem with it.
I have several vue.js components, written in single page component format.
For each .vue file, I have less written specific for that page.
After bundling, I have several style tags, which populate the global style space. Thus, some of my classes are overlapping on different pages.
Is this the intended functionality with vue.js and webpack?
This is the default behaviour for vue-loader (which is the main plugin in the vue-webpack template).
However, if you want to you can extract all CSS into one file:
npm install extract-text-webpack-plugin --save-dev
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
// other options...
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
]
},
vue: {
loaders: {
css: ExtractTextPlugin.extract("css"),
// you can also include <style lang="less"> or other langauges
less: ExtractTextPlugin.extract("css!less")
}
},
plugins: [
new ExtractTextPlugin("style.css")
]
}
Check out the docs of vue-loader regarding extraction.