I got a style.scss file for my website design. When including css/bootstrap.css (from bootstrap-3.3.7-dist) and the compiled style.css the site looks as expected.
But when putting the content of the style.scss file in Bootstrap's Drupal SASS starterkit's _default-variables.scss and including the compiled style.css (which is about ten times larger and obviously includes the bootstrap code) the site looks different in a few details (buttons, one spacing,...).
What is the right way to use the style.scss I got with Bootstrap SASS?
Thanks a lot!
Kind regards,
Michael
style.scss compiles to style.css, thus overwriting the previous style.css.
Any required changes to style.css should be done in style.scss, and recompiled to style.css.
Simply put, style.scss should be used only if you need to add updates to your style.css file. It would contain everything that is in style.css, just in a more readable format. There is no need to add link it on Drupal.
Please let me know if this is clear enough.
The solution is not to put the content of the scss file in _default-variables.scss but to import the file in scss/styles.scss.
Related
I'm new to PrimeVue and I'm trying to customize/modify the Bootstrap theme. I have a separate project where I completely modified the variables of Bootstrap (v4) and I want to use it in PrimeVue. I want to use SCSS so I can manage the styles well (just import the SCSS file needed in the component). How do I do that? Upon looking at the PrimeVue resources directory, it looks like it doesnt have the scss folder of Bootstrap, and it only shows the css file (generated). Any help is greatly appreciated. Thanks!
Edit: I want to completely modify the variables instead of overriding the PrimeVue Bootstrap classes.
I don't know if it's still relevant, but you can only make changes in SASS variables if you buy the designer license from Primefaces - otherwise you'll get access only to prebuilt files.
See the designer documentation here.
I need to develop a plugin for Moodle, and i need to have some js and css files in plugin. But i have the next problem - how to work with them from installed plugin? Of course, i can hardcode their path via to moodle structure, but it's a very dirty and bad way. Also, i know that i can place all js and css code inline, but i think that it's a bad decision too. Is there a built-in way to serve assets from plugin? I tried to find it in documentations, but found nothing.
Thanks
I assume you want to know how to include CSS and JS files into your plugin.
You can include a JS file via the command:
$PAGE->requires->js( /relative/path/your_script.js');
You can then call a JS function once the page has been downloaded with the command:
$PAGE->requires->js_init_call ( your_JS_function_name, array_of_parameters_here, bool: on DOM ready);
For example:
$PAGE->requires->js_init_call('init', array($USER->lang), true);
Be sure to make the $PAGE available with global $PAGE;, first.
Your CSS file can be named styles.css and put into the root folder of your plugin. The file will be automatically read by the system and included. It will take precedence over (will overwrite the settings of) the system CSS files. After that you will have to reload the theme caches.
How can I edit in CSS.
In Stencil framework can't found .css file.
In assets folder only found .scss file.
I want to edit in theme.css
How can I edit ?
Can any body help me ?
If you are developing a stencil theme locally and have ran stencil start it watches your SCSS files. So one option is you could add any custom CSS you want to the /assets/scss/theme.scss file.
Another option is you could create your own SCSS file, say for example custom.scss, and place it in /assets/scss/. Then import it to your theme.scss like this #import "custom" . Make sure you place it at the bottom of your theme.scss file so it overrides any css you are wishing to alter.
the .scss files are the css files. The stencil framework uses scss instead of the regular css.
This link should help guide you on how to edit the files: https://support.bigcommerce.com/articles/Public/Using-the-Stencil-Theme-Editor
the .scss files are the css files. The stencil framework uses scss instead of the regular css.
Please check this path /assets/scss/theme.scss
I´m looking into switch from gulp/grunt to only use npm scripts.
But I cant really solve how to get *.js and *.css from a given path and add it to the index.html file.
must I add it thru a "index.js" file or can I do something like...
"scripts": {
"inject": "inject src/app/*.js",
},
and then it will add it in my index.html where I have specified it like...
/* inject:js */
The suggestion by Chris Traveis worked out pretty nice.
So the answer to my problem was solved using https://www.npmjs.com/package/postbuild
There were no answers in the last 3 months on this popular topic, probably because there are wrong assumptions in the question. Distilling your question,
...how to get *.js and *.css from a given path and add it to the index.html file
To be short, do it manually. Use a good npm boilerplate such as npm-build-boilerplate and add the compiled JS and CSS files manually into your HTML.
... must I add it thru a "index.js" file, or <2nd option>
No. Add the files manually. Let me elaborate more.
With npm scripts you construct a pipeline and you know where your uglified JS files and compiled SCSS files are rendered. Yes, I have "main": "index.js", row in my package.json, but there's no "index.js" in my project at all. I get npm scripts to crunch files in various folders, to output them into other folders and I manually add end CSS and JS files into HTML templates (in my case, static Hugo website's templates).
I see one case where "dynamism" in the HTML is needed — when you want to bust cache and add the unique strings to the end-point CSS/JS file names. However, then you might want to consider scripts that count MD5 hash of the files' contents, because if you run the build multiple times and your existing CSS or JS files haven't changed, you want to keep the old file names. Visitors might have cached them (and think about CDN too). In this sense, npm postbuild script mentioned in the comments above is inferior because it just uses "version" counter. Look for alternatives to npm postbuild to bust caches.
I've setup a compass file watcher as listed here.
http://blog.founddrama.net/2013/04/watching-compass-files-in-webstorm/
The file watcher works flawlessly, same as the command line compass process.
I'm curious if there's a way to configure WebStorm to point to references in the .scss file instead of the compiled app.css file.
Example
Inside index.html i have
<a href='#' class='pandaStyle'>
When i click on pandaStyle, it takes me to the line inside the compiled app.css
I'd like it to take me to the partial of _animalStyle.scss
As #Iena said, it's not possible. Try voting for the issue (http://youtrack.jetbrains.com/issue/WEB-6737) and JetBrains may add the feature.
I solved the problem like this:
Adding
#import "myFolder/myCssStylesheet";
to the .scss file and get all css classes and Id's from that stylesheet.
For example:
#import "Styles/bootstrap.css";
gives me all bootstrap classes autocomplite in my .scss files