So,
I have used bower to install bootstrap SASS files into my application.
I am using AngularJS and want to use my own directory structure instead of the default Content path defined by MVC.
So I have installed https://github.com/twbs/bootstrap-sass and in my core SASS file I have imported the bootstrap SASS like this:
#import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
everything loads in my application and the site is definitely using bootstrap, but whenever I try to use a glyphicon I just get a square instead of the icon. Looking in the console I can see that the path to the glyphicons is wrong. It is showing:
http://localhost:58859/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf
but it should be
http://localhost:58859/assets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf
Now I "could" edit the variables file and change this line:
// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
to something like this:
// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
$icon-font-path: "/assets/bootstrap-sass/assets/fonts";
but whenever someone loads my project from github and bower resolves bootstrap my changes to that file will be lost. I have noted in their documentation they talk about sprockets and mincer, but I have never used these so I have no idea what they are for.
My question is, can I change the font path without editing the SASS file directly?
Related
it looks like everything in the clientapp folder is compiled into javascript and bundled into main-client.js using webpack, probably. i don't know much about it.
what i'm wondering is, if i have some javascript and css that isn't strictly part of the angular app, where in the project do i add these dependencies. do i add it in the dist folder? it looks like that folder is dynamically created by webpack so i didn't want to do that.
for example, the default angular app it installs clearly uses bootstrap for css grid system classes, so bootstrap must be installed somewhere. is it in the webpack config? how would i go about adding any other third party assets or my own?
thanks for any clarity about using this template
According to this blog by Steve Sanderson, who is apparently the author of this template you are referring to, the intended order of operations to add third party node modules is:
Add the module to your package.json file, save and then restore npm packages,
Add the item to the vendor array in webpack.config.vendor.js (which is the same as adding the item to the nonTreeShakableModules in the same file as Mike_G mentioned),
Run webpack --config webpack.config.vendor.js to repack your new assets. Make sure to install webpack with npm before this step.
It may be worth mentioning that Steve says that in step number 2, if what is being added is a css asset, the full path within node_modules and extension are needed, i.e. font-awesome/css/font-awesome.css, but if you are only including a Javascript library, then just the name of library will suffice, i.e. moment for Moment.js.
Well since webpack is being used, there is no way of adding any JS or CSS code inside that budnle.js file.
You would have to create you code before the packaging is being run.
The other way is to create your files and import them manually in t he index.html file.
This is ad hock way of doing stuff, but only in case that you need to add some CSS code to your project and not having knowledge of angular/webpack stuff.
As for JS code, its nearly impossible to add anything like that, since html code is also compiled and sent into bundle.js.
You can use two ways:
1) use angular/cli. In .angular-cli.json you can find:
"styles": [
"styles.css"
],
"scripts": [],
here you can add any custom css or js file.
2) work with static files:
https://learn.microsoft.com/en-us/aspnet/core/fundamentals/static-files
in this second way you can set a specific folder, add any custom file css or js and link to it from _layout.cshtml file.
hope this help u
I have some problems with SASS in ionic,
Whats the problem?
The problem is that custom stylesheet's doesn't work how it should.
I have sass folder with ionic.app.scss file and _test.scss file with some code.
I imported _test.css in ionic.app.scss file like this:
#import "../scss/test";
And when I edit and save ionic.app.scss, it's works perfectly, compiled in min.css and working in my browser, but when I edit and save my _test.scss file, nothing happening. _test.scss file only works, when I compile my ionic.app.scss file.
Can someone help me with that? What I miss??
Without seeing your folder structure, It's a shot in the dark but i think your _test.scss file isnt being watched.
Try moving it to be in the same directory as the other files and change your import to be.
#import "{folderName}/test";
Just make sure its within the scss folder with the other files
First of all I'm assuming you are using Ionic 1.x.x in my answer. You have a couple of places where you should check.
First is the ionic.project file:
"watchPatterns": [
"www/**/*",
"!www/lib/**/*"
]
Make sure you have your directory inside the watchPatterns. This most probably is correct since it's the Ionic default. You however mentioned sass folder in your question so I can't be sure. This is why I'm suggesting all the custom folder stuff below. Although you also mentioned that ionic.app.scss is located in the same folder so the folder probably is the default ionic folder if you have not changed the name of the folder.
Secondly in your gulpfile.js you have the following:
sass: [
'./scss/**/*.scss',
'./www/customfolder/**/*.scss'
],
Make sure your css file is included in these paths. The second one is a possibility when a custom folder is used. Just set the path correctly. This will then use the default ionic gulp task sass and watcher watch.
After this you should be able to include your custom SASS stylesheet in the scss/ionic.app.scss file (not in www folder) with the following:
#import "www/customdirectory/style"; // If custom directory
/* IN YOUR CASE */
#import "style";
If the _style.scss file is in the same directory as the ionic.app.scss then you do not need to set the path, just the name of the file is enough.
Hopefully this can be helpful to you when trying to solve your problem.
I'm just starting to play with SASS in Visual Studio. The question I have is that if I put my .scss file in the theme folder, the compiled CSS file will automatically be added to the site. The problem comes in that it generates a .css AND a .min.css file and BOTH are being applied to pages that use the theme.
Is there a way to have VS only add the .min.css automatically? I'd love to keep them in the theme folder and let VS handle linking everything automatically, but I don't want the stylesheet to be added twice. Or is there something else that is considered better/best practice that I should be doing with SASS files?
Are you using Web Essentials plugin to compile SASS? If yes, in its options, you can change it so when it compiles it can output min, css or either.
example for LESS (same for SASS):
Plus, even if VS is producing min and css files, it wouldn't make much difference since bundling will only use one file. You can just exclude certain files from the solution, and they will be ignored.
You could also look at build tools such as Gulp or Grunt to compile sass - they have much more options that you can apply.
Prestashop theme folder contains a SASS folder. Where I am having .scss files for my newly developing theme. Am clear in compiling sass to css files locally, but prestashop is not having any inbuilt sass compiler, so does it makes any sense in uploading the sass folder to the server???
it does only make sense if you're using css-maps so you can actually use the scss instead of the compiled css to see the right lines in the inspect-element-console.
otherwise you don't need it.
//Edit might sounded confusing, what i mean is: You can actually see your scss-lines if you're using css-maps (the map needs the source to your scss-file) where all scss-commands you did are linked to the compiled css. if you inspect an element while having this css-map and the scss on the server and all file-directories correct then you'll see the scss-commands instead of the compiled css-commands. it makes developing much easier.
I want my IDE to see Bootstrap files for CSS classes autocompletion and on-the-fly LESS compiling. But I don't want to store Bootstrap inside my project folder structure and copy libraries in each project. How can I make IDE know where is libs?
Some approaches I tried.
Using relative paths. #import '../../../../../Bootstrap 3/less/mixins'; does not look good. Moreover, despite import statement is correct (without red underlining), IDE does not "know" about imported mixins. When I just copy libraries, IDE "knows" about them.
Connect as JS libs. I see them in project files view. LESS syntax checker cannot locate them, no matter what path i specify. Import statement is underlined with red wavy line.
Now, I can use only copy and paste technique or use links (or directory junctions). I am not sure that this is correct way.
I tried this PhpStrom and PyCharm, but I suppose that WebStorm cannot resolve this problem too.
You can add a folder where your Bootstrap files are stored as additional content root to each of your projects (Settings/Directories, Add content root). See also WEB-7452