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.
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 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've generated a couple of helper scss files within my scss project folder indicated by a '_' prefix. On file change however, prepros will compile them into a css file.
As I understand how this should work is _ should indicate to the pre-processor to ignore the file until explicitly included into a standard .scss file. And this isn't the case. Would this be a bug in prepros or is there a configuration setting somewhere that I would need to adjust?
I know this is an older post, but what's happening is if the partials are imported into a main SCSS file, the compiler will ignore the partials as individual files and include them in the main CSS output. If they are not imported, they will compile unless you filter them in the software.
I used Prepros a lot,
I have two Solution of this.
Solution 1: It may be a bug a in software, So updating may solve your problem.
Solution 2: You may have not configured settings, So updating configuration settings.
To updating configuration settings do the following steps:
1- Click on settings
2- Now In File Watcher panel, go to Path Filters and add _*.scss in it. Now what this will do is that it will ignore all .scss extension files starting with _ containg any name.
:)
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'm using VS2013 with Web Essentials support for SCSS.
I have a single directory '/Resources/SCSS' for SCSS files.
Some need to Export to '/Resources/Style', others need to go to 'AppThemes/[ThemeName]'. Can I specify the directory I want in the SCSS file?
Web Essentials supplies a single Custom Output Directory.
Thanks
I may provide you simple alternate solution for the same.
Just create a simple .scss file there in 'AppThemes/[ThemeName]' say 'site2.scss'
and import your required .scss files in 'site2.sccs'. It will create a css file for you.