I added this css
high {
background-color: red;
}
medium {
background-color: yellow;
}
low {
background-color: whitesmoke;
}
to wwwroot\css\Site.css, and when I publish the application with dotnet publish, I can see the minified css file is being referenced but it does not contain these new styles.
bundleconfig.json
// Configure bundling and minification for the project.
// More info at https://go.microsoft.com/fwlink/?LinkId=808241
[
{
"outputFileName": "wwwroot/css/site.min.css",
// An array of relative input file paths. Globbing patterns supported
"inputFiles": [
"wwwroot/css/site.css"
]
},
{
"outputFileName": "wwwroot/js/site.min.js",
"inputFiles": [
"wwwroot/js/site.js"
],
// Optionally specify minification options
"minify": {
"enabled": true,
"renameLocals": true
},
// Optionally generate .map file
"sourceMap": false
}
]
Why is this happening? How can I ensure that this bundle config is being applied?
I found this link useful, where it mentioned the need to add the BuildBundlerMinifier package to the project.
So after calling
dotnet add package BuildBundlerMinifier
dotnet restore
I can see my css updates in the .min.css file
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']
}
....
}
When using the following in my Webpack config:
{
test: /\.scss$/i,
use: [
'style-loader',
{
loader: 'css-loader',
options: { importLoaders: 1 },
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env'
],
],
},
},
},
"sass-loader"
],
},
I'm noticing that sometimes CSS rules like the following are removed from the bundled CSS output.
img {
margin-inline-end: 1rem;
}
When removing the above Webpack config, the rule above is applied as expected.
More specifically:
when an [dir="rtl"] attribute is set on the html element, the margin-inline-end: 1rem; style exists
when the dir attribute is not set, the margin-inline-end: 1rem; style does not exist in the bundled output
when the 'postcss-preset-env' plugin is removed, the margin-inline-end: 1rem; style exists regardless of the presence of the [dir] attribute
What is causing this behavior and how can I disable it while continuing to use postcss-preset-env for other things like autoprefixer?
By default postcss-preset-env is processing stage 2+ rules, depending on the exact version of cssdb was installed, you might need to tweak the stage option while using postcss-preset-env to a higher value like stage: 3.
And looks like some logical properties like margin-inline-end will be processed into
[dir='ltr'] { margin-right: 1rem } ...
Also rules can also be disabled precisely in the option :
{
/* use stage 2 features + disable logical properties and values rule */
stage: 2,
features: {
'logical-properties-and-values': false
}
}
This github repo vanilla-js-prototype-starter has webpack & PostCSS configured working well, check and see if it can help a bit.
I have a simpe ASP.NET Core site built on the default template. I need to have the site.min.css updated since site.css has been updated.
This is on OS X in Jetbrains Rider. The MSDN docs say that (on Windows!) simply rebuilding the project would update the minified files.
the bundleconfig.json file is unchanged:
// Configure bundling and minification for the project.
// More info at https://go.microsoft.com/fwlink/?LinkId=808241
[
{
"outputFileName": "wwwroot/css/site.min.css",
// An array of relative input file paths. Globbing patterns supported
"inputFiles": [
"wwwroot/css/site.css"
]
},
{
"outputFileName": "wwwroot/js/site.min.js",
"inputFiles": [
"wwwroot/js/site.js"
],
// Optionally specify minification options
"minify": {
"enabled": true,
"renameLocals": true
},
// Optionally generate .map file
"sourceMap": false
}
]
How can I update the minified file(s) be it from the IDE or the CLI (Command Line Interface)?
Sorry for a long delay. I was preparing to the conference. For fix your problem just add: <PackageReference Include="BuildBundlerMinifier" Version="2.4.337" /> to you csproj file. And you bundle files would be updated after build.
I'm using Gulp to bundle all my dependencies CSS files, including Bootstrap into on file.
However when I minify the bundled file I loose the bootstrap unicode.
So for a non-minify bundle I can see the glyphicon styling:
.glyphicon-star:before {
content: "\e006";
}
But in the minified bundle the glyphicon styling becomes this:
.glyphicon-star:before{content:""}
My gulp code is the following:
var gulp = require("gulp"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin");
...
gulp.task("min:css", function () {
var tasks = getBundles(regex.css).map(function (bundle) {
return gulp.src(bundle.inputFiles, { base: "." })
.pipe(concat(bundle.outputFileName))
.pipe(cssmin())
.pipe(gulp.dest("."));
});
return merge(tasks);
});
Any idea why this happens?
Okay, I found the root of the issue and it's not to do with gulp at all. To elaborate more, my setup for web development is VS2015 and in it they have an extension that will help bundle and minify the files and that extension is what causes the glyphicon to break.
One way to get around this issue is to configure the bundleconfig.json to create a separate minify file like this:
{
"outputFileName": "core/lib/dependencies.css",
"inputFiles": [
"core/lib/bootstrap/css/bootstrap.css"...
],
"minify": {
"enabled": false
}
},
{
"outputFileName": "core/lib/dependencies.min.css",
"inputFiles": [
"core/lib/bootstrap/css/bootstrap.min.css"...
],
"minify": {
"enabled": false
}
},
So just to recap - VS2015 will break glyphicon should you decide to bundle all your thirdparty css libraries!
I have a problem with Web Compiler with VS2015 Update 1 and Sass.
In my Scss file, i declared some images as background.
Example :
.example {
background-image: url(images/ex.jpg);
}
In the file compilerconfig.json, the outPutFile is not in the same directory.
In the file compilerconfig.json.defaults, i set relativeUrls as false in sass section.
When i compile, url becomes relative like :
.example {
background-image: url(../../../../../images/ex.jpg);
}
I have the same problem with imported file.
Is there any way to resolve this ?
I found how to disable relative urls :
the option is not to set in the file compilerconfig.json.defaults but in compilerconfig.json :
[
{
"outputFile": "../../../../../inetpub/wwwroot/ui/skins/test.css",
"inputFile": "Web/Stylesheets/test.scss",
"minify": {
"termSemicolons": true
},
"options": {
"relativeUrls": false,
"lineFeed": "crlf"
}
}
]