Here is my problem. In my css directory I have a less directory that holds page.less, and search.less. Inside page.less I am using the import method to render my search styles when grunt complies my less files. I end up with page.css. In page.css the search styles are being added twice even though inside the page.less file I am only importing it in one place
My gruntfile.js is as follows
less: {
options: {
compress: false,
ieCompat: false
},
dev: {
dest: "css/page.css",
src: [
"css/less/*"
]
}
},
The pattern src: ["css/less/*"] is compiling all files.
This pattern should only include files that are not imported into other files, otherwise you will be including file B (which imports file A) and file A itself - again.
In compass-sass the underscore is used to identify files being imported into others, while "main" files (which import others) have no underscore.
Related
I'm currently building a UI Kit for a client who is using ASP.NET for the main application/backend for their project. The UI Kit that I'm building is created using NuxtJS and I want to compile all of the SCSS files along with Bootstrap into a single compiled CSS file, from what I've gathered on the Nuxt Docs they recommend compiling the SCSS files into single CSS files for each component.
Before I start making a mess of the config file, is there a way to compile them into a single file so the client can just enqueue it on their end? It doesn't need to be the most performative which is why we're going to push it into a singular file.
Here is the part of the doc for Nuxt2, I quote
You may want to extract all your CSS to a single file. There is a workaround for this:
nuxt.config.js
export default {
build: {
extractCSS: true,
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.(css|vue)$/,
chunks: 'all',
enforce: true
}
}
}
}
}
}
This part is not directly written but still available for Nuxt3, so I guess that it should work in a similar approach.
There is only one discussion on Nuxt3's repo, but you may start trying the snippet above already, to see if it fill some of your needs.
I have the following vue.config.js (showing just the relevant part)
pwa: {
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'src/plugins/service-worker/service-worker.js',
exclude: [/.*images\/(?!cached).*/g, /\.map$/, /manifest\.json$/]
}
},
I'm looking to exclude all ./src/assets/images/* images unless they are in the following directory:
./src/assets/images/cached/*
Here is an example of this regex working: https://regex101.com/r/vANnrn/1/
However webpack/workbox still includes all of my images that might be included in components in the precache-manifest file.
My suspicion is that the exclude option applies to the folder structure of assets inside /dist rather than /src? If that's the case this won't work because webpack puts all images into a flat /dist/img folder.
My goal is to provide a css file in the distribution package which can be used by the consumer if needed.
For that I would like to create a kind of global scss file, but I want to avoid that this style is attached to each component + it also won't be used directly by the components. So for that I would like to create my-style.scss file somewhere in the /src folder.
What would be the best way to compile this file to my-style.css and copy it to the dist folder?
It is possible to specify a global style with Stencil. Simply add the globalStyle property to your stencil.config.js and provide the entry scss file. Your config should look something like this:
const sass = require('#stencil/sass');
exports.config = {
namespace: 'my-component-lib',
outputTargets:[
{
type: 'dist'
},
{
type: 'www',
serviceWorker: false
}
],
globalStyle: 'src/globals/app.scss',
plugins: [
sass()
]
};
exports.devServer = {
root: 'www',
watchGlob: '**/**'
}
The build will successfully compile the scss to dist/my-component-lib.css.
From the docs: https://stenciljs.com/docs/config/#copy
The copy config is an array of objects that defines any files or
folders that should be copied over to the build directory. Each object
in the array must include a src property which can be either an
absolute path, a relative path or a glob pattern. The config can also
provide an optional dest property which can be either an absolute
path or a path relative to the build directory. Also note that any
files within src/assets are automatically copied to www/assets for
convenience.
In the copy config below, it will copy the entire directory from
src/docs-content over to www/docs-content.
Within stencil.config.ts:
copy: [
{ src: 'docs-content' }
]
For example I am copying my css file from src to the build directory and it's totally standalone, e.g. https://github.com/BlazeUI/blaze/blob/master/packages/atoms/stencil.config.ts#L14
By default Grunt compiles bootstrap.less into bootstrap.css. The question is how do I make it compile my custom styles.less where I am going to import all Bootstrap less files plus some of my own into styles.css?
In think there are many answers for that question. I think you should following the advice of #seven-phases-max and try to not modify the source code (or at least make minimal changes).
In your Gruntfile.js you will find, two Less compile arguments (compileCore and compileTheme):
less: {
compileCore: {
options: {
strictMath: true,
sourceMap: true,
outputSourceFiles: true,
sourceMapURL: '<%= pkg.name %>.css.map',
sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
},
src: 'less/bootstrap.less',
dest: 'dist/css/<%= pkg.name %>.css'
},
compileTheme: {
options: {
strictMath: true,
sourceMap: true,
outputSourceFiles: true,
sourceMapURL: '<%= pkg.name %>-theme.css.map',
sourceMapFilename: 'dist/css/<%= pkg.name %>-theme.css.map'
},
src: 'less/theme.less',
dest: 'dist/css/<%= pkg.name %>-theme.css'
}
}
And the following task defined: grunt.registerTask('less-compile', ['less:compileCore', 'less:compileTheme']);
It should be easy to add your own sub task and compile argument. When doing that you can compile your styles.less into styles.css. Notice that you have a separated CSS file as result. Loading that file requires a extra http request.
Unless you import bootstrap's Less code in your styles.less you can also not reuse Bootstrap's variables and mixins. If you need a separated CSS file consider to create your styles.less as follows:
#import (reference) "bootstrap";
//your custom code here
In the case that you are able to compile all you code in a single CSS file, you can do the following:
Create a file custom.less and add your customization in that file. And save that file in the same folder as your bootstrap.less file.
Than write at the end of the bootstrap.less file the following code: #import "custom";
After that you can compile bootstrap as usually.
Alternatively create custom.less as follow:
#import "bootstrap";
//your custom code here
To compile custom.less instead of bootstrap.less by default you should have to modify your Gruntfile.js. In the CompileCore argument change the src option into src: 'less/custom.less',.
I have setup a project with Bootstrap's less files and gruntjs in order to be able to have live edit in the Chrome Workspaces.
Hereunder is my Gruntfile.js. It auto-compiles less files into the desired style.css and creates a source map file when I save my changes. I'm also able to edit and save less files from Chrome Workspaces after adding the project directory to the Workspaces.
module.exports = function(grunt) {
'use strict';
require('matchdep').filterDev('grunt-!(cli)').forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
dev: {
options: {
sourceMap: true,
sourceMapFilename: 'public/css/style.map',
sourceMapBasepath: 'public/css'
},
files: {
'public/css/style.css': 'less/style.less'
}
}
},
watch: {
all: {
files: ['less/**/*.less'],
tasks: ['less'],
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['less', 'watch']);
};
The problem I'm having is that I'm unable to see the live reload of my modifications on the less files via Sublime Text 2 or Chrome Workspaces directly in the browser without refreshing the page.
What am I missing? I have to map files? What file to what file exactly? Will I need to map multiple the same way or only one file.
I've also added an image where you can see the files tree.
FYI, also please note that the style.less imports the bootstrap less files and my custom less files.
// Core variables and mixins
#import "bootstrap/bootstrap";
#import "showtime/lib";
#import "showtime/intro";
#import "showtime/nav";
#import "showtime/portfolio";
#import "showtime/contact";
#import "showtime/footer";
#import "showtime/album";
Update If edit from the Elements tab, my style.less file gets overwritten with the content that is also in style.css and then it works. What am I doing wrong ?
Many thanks for your time and help.
OK the only I was able to make everything work is by putting the less files in my css folder.