Is it possible to only load the appropriate .scss files? For some reason even though a react component isn't being used on a page the .scss file is still being included in my css.
I am currently using ExtractTextPlugin since I also want sourcemaps to work.
You could look into react-proxy-loader It will allow you to load components and their dependancies on demand.
I'm assuming what is happening for you right now is all your code is being delivered as one or two bundles, so it makes since that some components that may not be in use (along with their required css) would still be included with the bundle.
Related
I am building an an app inside a Laravel project using Vue components. The blade layout reads off of the bundled app.js so I was wondering when using frameworks like Vue and React, are the files even necessary other than just being there for the bundle process? Like what I had actually removed the .vue files I have (components) -- would it still work since it's reading off the bundled source file?
.vue files are source files, and should therefore be in source control all the time. When it is compiled (using vue-cli for instance), a .js file will come out of it and that is what the browser needs.
So yes for production environments you can remove the .vue files since you only need the bundled and compiled code.
I'm using angular-cli (1.5, angular 5.0) and I want to be able to define multiple themes. It seems one way to do this is to:
Define the bulk of the scss as per normal ("styleExt": "scss", and "styles": [...] .angular-cli.json)
Use node-sass directly (outside of angular-cli config) for the theme.scss files
Link to the appropriate theme.css (Either replace the default theme.css outright, or change the link href dynamically
However, I'm not sure how to make that work in conjunction with ng serve, which watches the files. So, I was wondering if there's some way to do this through angular-cli directly. That is, can I specify some scss files to go into the bundle, but others to generate individual css not included in the bundle? For example, Just generate a assets/themes/foo/theme.css from an assets/themes/foo/theme.scss ?
A use case is that we may need multiple themes, but only distribute one to any given customer (defined to match their internal software).
After some additional digging, I found the Global Styles story. If you define a style as an object with an output, it will bundle it separately, so you could swap out a default theme with another (similarily compiled) on deploy. Or, if defined as lazy, it will not include it in the index file (index.html), and you can then define it explicitly, with an id (or unique class), and swap out the href (similar to what the angular material them switcher is doing.)
I'm currently developing a react application using jspm/systemjs.
I've been looking for a way to bundle assets inside of an bundle-sfx (build) file.
I have some images, fonts and potentially svg to add into my application. Currently the build file link those by urls into my sources.
But my goal is to be able to provide a single file to load in the html, which also bundle those assets; or at least package all those assets into a common folder from which I could serve as is.
For now I'm using systemjs/plugin-css, which concatenates all the css into a minified file.
I've looked at those plugins: vuzonp/systemjs-plugin-svg, systemjs/plugin-image, and systemjs/system-font.
But from what i read from that thread, it is not easily doable nor even possible at the moment.
Does anyone know how to do that, or could point me at the right direction ?
Does a plugin exist which would handle assets as undiscriminated files ?
Do I have to process each kind (mime-type) of file differently ?
We have a project using Webpack with css modules. To apply scoped namespaces, each component has its own .less file. Inside that .less file, we import our common.less file for references so we can use it like so:
#import (reference) "../global.less";
.navbar {
.navbar;
}
This seems pretty convoluted but results in an encapsulated class pairing with its component and allows the others to develop the global.less file internally without having to work with React.
My issue with this, beyond the redundant class wrapping, is each component that imports this rather large global.less file appears to be adding nearly a second to our webpack build.
I'm curious if there is a mechanism that will allow me to expose the contents of global.less for referencing within these files? I've found Webpack can shim js modules. I'm essentially looking for a .less or .scss equivalent.
You can add the commonChunkPlugin, then add your global.less path to it, in that way it will be compiled only once in another js file.
here
I have started trying out Sass for my css work. In the directory where my Css file resides I see a '.sass-cache' folder too. Can any one tell me why is this folder created and is it safe if I delete it.
thanks,
By default, Sass caches compiled templates and partials. This dramatically speeds up re-compilation of large collections of Sass files, and works best if the Sass templates are split up into separate files that are all #imported into one large file.
Without a framework, Sass puts the cached templates in the .sass-cache directory. In Rails and Merb, they go in tmp/sass-cache. The directory can be customized with the :cache_location option.
If you don’t want Sass to use caching at all, set the :cache option to false.
You can configure the Sass cache location by setting a Sass option in your compass configuration file like so:
sass_options = {:cache_location => "path\to\tmp\sass-cache"}
Source: Sass reference
If your main problem is "inhibiting pushes to development environments when multiple developers use/change it", you can add it to your .gitignore file. As stated in the other answer, Sass cache files speed up compilation based on whether a Sass file has changed since last compile.
In my experience it's standard practice to consider them temporary files, and omit them from version control.