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
Related
I have a style.sass file that #uses several _*.sass partials. That was all working fine. Now I added a _*.scss file (it just contains a map, so I wanted it to be multiline), but editing that file does not trigger a rebuild of the style.sass file. I tried adding a SCSS file watcher too, since I'm not sure how IntelliJ decides what to watch, but that didn't help.
It works fine using Dart-SASS's --watch argument. How do I make IntelliJ do the same?
(Although it's a Play project, I'm using IntelliJ's file watchers because I wanted to be able to use #use, so I needed Dart SASS.)
The watcher can only listen to changes in files of same type (either SASS or SCSS), depending on the watcher settings, so you can't make the watcher work for both .scss and .sass files at the same time unless you use a custom scope with both .sass and .scss files included and set File Type: to Any:
I have used vue cli to create a custom vue project. I included router and vuex. I have bootstrap.min.css and styles.css in src/assets/css/
in my App.vue styles tag I use the following:
#import './src/assets/css/bootstrap.min.css';
#import './src/assets/css/styles.css';
when I do npm run serve, these files are served as html. It feels like I have tried a million variations of this import path but nothing works. I have wrapped it in a URL, I have 'required' it in main.js. Nothing works.
This should work if you are pulling it from node_modules:
#import "~bootstrap/scss/bootstrap";
check how I did it here.
I tried importing the files in my main.js file instead of the app.vue tags and noticed errors along the lines of 'couldn't find modules … /assets/img/bg1.jpg' etc etc. Turns out that all the asset path within my styles.css files needed correcting before it would work.
Thanks to everyone who assisted!
I am using laravel5.4 with vuejs2 to build a small project. I have just started learning vuejs2 with laravel. Using laravel-mix to compile my assets. In laravel-mix documentation i can't seem to find a way to add my own plain css file to be merged and watched.
I have my own css rules in public/css/custome.css file. what should i write in the webpack.mix.js file so that my this file is included and watched by laravel mix? Currently i have below lines in the file:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Move your custom CSS file into resources/css folder and write the configuration below in webpack.mix.js
Note: You probably won't have a css folder in resources, so just create one.
mix.styles([
'resources/css/custom.css'
], 'public/css')
I found a solution on Laracast and it worked for me.
Here are the steps :
Save the content of public/css/custome.css in resources/assets/sass/_custome.scss
You have to change the file extension to .scss and add an underscore at the beginning.
The underscore will be useful when importing in your main app.scss file.
Import your resources/assets/sass/_custome.scss file into your resources/assets/sass/app.scss this way :
/* importing _custome.scss from the same directory containing the following files
resources/assets/sass/{app.scss, _custome.scss, _variables.scss} */
// import _custome.scss
#import "custome";
// import _variables.scss (custom variables for bootstrap-sass)
#import "variables";
// importing bootstrap-sass from node modules (if you are using bootstrap)
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
Include this in your webpack.mix.js file
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Compile with
npm run dev
That's all.
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.
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