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.
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?
First of all I have to note that this all worked well some time ago. I have returned to project after some time. Meanwhile I have updated PhpStorm and migrated to Win10. Everything else stayed untouched.
I have problem with triggering scss parial compilation. When I make changes in root file "global.scss" everything works ok - partials are also compiled. However when I make changes in partials PhpStorm not triggers compilation of root file.
PhpStorm version: 2017.2.3
File structure:
Watcher config:
Scope config:
global.scss
I have tried a lot - nothing works. It seems that partials - prefixed with underscore are just ignored by file watcher.
EDIT:
I found something - it seems that wildcard in scope pattern ignores underscored files. However partials are marked as included in files tree. I temporarly changed scope to project files and it works well - unfortunetally I can not leave this setting.
EDIT2:
I don't know is it bug or feature but PhpStorm handles nested Source roots in strange way. Check this file structure:
Without source root for scss directory, compilation is triggered even with scope pattern. However compiled css is placed in wrong directory - so it is not usable.
Based on your info and investigation: you are using nested "Source" folder (on scss) and $SourcepathEntry$ & related macro... which does not seem to work as you expected in your IDE version.
Get rid of it -- your setup does not need it at all. Your folder structure is pretty standard so it can be resolved using more "standard" ways.
Disable this File Watcher for now (you may delete it later) and make new one.
There try $FileDirPathFromParent()$ parametrized macro (it accepts parameters). For example for $FileDirPathFromParent(src)$ it returns foo/bar for some/path/src/foo/bar/baz.scss file path. This macro should do the job when making the needed path.
Shahzaib here, coming to you for a bit of help !
I'm still new in the Shopify and liquid stuff but i'm getting there.
I'm cutrently trying to minify a scss.liquid file on Shopify, usually when I try to do that with a css file, I use an online minifier, exept that, apprently the scss.liquid format is not properly handled. Every time I try to minify it, my site crash ?
Do you guys have something to recommand regarding minifying a scss.liquid file ?
thanks in advance,
regards, Shahzaib.
I recommend setting up a gulp task to do this. This will help simplify your SCSS files into individual files for whatever they style. Also, you won't be edited your theme's default theme.scss.liquid file, so it is easier to overwrite default styles, and you know exactly which styling is yours vs the theme's.
To setup a gulp task, you will need to install node.js and gulp. I recommend using npm for this. Here is a good introduction tutorial to this which you'll need to adapt a bit to work with your Shopify file structure. For example, I recommend adding a src directory for your custom .scss files, and compiling them into one single file in the assets directory, instead of working directly in the theme.scss.liquid file.
https://css-tricks.com/gulp-for-beginners/
Once you have completed those instructions, make sure to add node_modules to your .gitignore file before committing.
Next, setup your project to use themekit. https://shopify.github.io/themekit/ , and have your gulp task run on save of the file. This will compiling your src files into a single file in the assets directory which will then be uploaded to your store by themekit.
Hope this helps!
I'd second than10's answer, and add that if minification of static assets is going to be part of your theme development workflow, use gulp.js running locally with something like gulp-shopify-upload watching your changes and pushing them up to your store:
https://www.npmjs.com/package/gulp-shopify-upload
See basic usage in particular.
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