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
Related
I have a project that uses CoreUI and has a file structure that looks like this:
src
/scss
style.scss
/components
/Component
Component.tsx
Component.scss
The CoreUI library is built on top of Bootstrap and requires the style files to be imported independently. Those files are imported on the style.scss file like so:
#use '#coreui/coreui/scss/coreui';
#import '#coreui/chartjs/scss/coreui-chartjs';
However, when trying to import the first scss file above into Component.scss (using the #use directive as well) to reuse Bootstrap classes, the compilation time slows down quite considerably, making it really painful to make changes to any styles. I've already tried to use the #forward rule too, as well as importing the style.scss file into a partial and importing the partial without success.
There's probably a simple workaround for this but I haven't been able to find it. How can I keep the compilation times short when reusing sass files?
I’m using AngularDart 5 in order to create a web app. I want to store some SCSS variables in my styles.scss file (web folder). What is the best way to use these variables in the SCSS stylesheet of a component (lib folder)?
Thank you!
There are a couple of concepts I need to clear up first:
Scss variables are only available at compile time. Once the file is compiled to CSS they are not available at runtime.
Dart has a convention where only files in the lib/ directory can be imported to other places in the app. I believe that dart-sass enforces this convention, and you won't be able to import the file from web.
So your options are:
Move the styles.scss file to the lib directory so that it can be
imported. Convention is to have it start with an underscore which
signals it is just for imports.
Use CSS Variables which can be used
at runtime.
I'm looking to get started with Bootstrap 4 using SCSS. I think I have Bootstrap 4 with SCSS up and running but I would like to use a theme off of https://bootswatch.com. When I used their themes with BS3 it was straight forward LESS files that you just replaced. With BS4 they have a _variables.scss which is obvious to just replace but then they have a _bootswatch.scss file which I'm not 100% sure what to do with.
I assumed I would just put the _bootswatch partial file in the same location as all the other BS partial files. Then I added #import "bootswatch"; to the end of the bootstrap.scss file and recompiled but that did seem to work.
I've search and can't find any information on this. Their documents mostly show how to insert their precompiled files or use their CDN. There is very little about using their SCSS files.
I did some research and testing and finally got it to work. I wanted to post an answer for others with the same question. Hopefully this will help someone else.
I created a new MVC 5 project and then ran the following NuGet packages.
Install-Package bootstrap
Install-Package bootstrap.sass
This will register Bootstrap and create all of the partial scss files in the Content\bootstrap folder. I then created the Content\scss and copied the _variables.scss and _bootswatch.scss files to that folder.
In my site.scss file I added the following imports to the top of the file.
#import "scss/variables";
#import "bootstrap/bootstrap.scss";
#import "scss/bootswatch";
You'll have to be mindful of the order you place them in, any other order caused it not to work or throw an error due to where the variables are being created and called.
If you research about default! you'll learn that it is the opposite of !important causing that variable to only use that setting if another one is not found. In my mind it would be more accurate to remove the !default values from the Bootswatch _varaiables which is what I did. However, that ultimately didn't seem to affect anything. I still had to use the order above.
I then had to remove any reference to Bootstrap.css in the App_start\BundleConfig.cs file and make sure it references the site.min.css file which will include all the bootstrap classes. Using the Web Compiler plug in for Visual Studio, I had it create and compile the site.min.css for me.
I'm using webpack. I have lots of sass files. Each file imports "common.sass" file. I do not want to write #import "common.sass" in each file. How can I avoid of writing it in each file?
Maybe there is opportunity to add somehow string #import "common.sass" in each file?
You can't avoid the import, because each sass partial is being processed in isolation by your loaders. But, you can avoid having to add that line to each file. Baggage-loader is a loader that lets you specify other modules that should automatically be included when loading a module. It's pretty simple and flexible, and easy enough to fork and modify if you need to.
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.