I wanted today to try scss support of yeoman.
I followed the procedure :
$ yo angular
include Twitter Bootstrap? Yes
use the SCSS version of Twitter Bootstrap with the Compass CSS Authoring Framework? Yes
$ grunt server
And then the default view load but without style formatting. In the console I can see that it cannot find /styles/main.css file.
I have seen that compass put the file in .tmp/styles/main.css, so I tried to change it in index.html. But the same. Moreover there is no .tmp directory in my project folder.
So I ran "grunt build" and loaded the index.html in dist directory in a MAMP server. Same, no css formatting, moreover no error in the console
You shouldn't be putting the '.tmp' path anywhere in your index.html, it should be left pointing to 'styles/main.css' like so:
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
You should also have your actual style file at 'app/styles/main.scss', which Yeoman should have created for you. When you run 'grunt server' it uses compass to compile all the scss files into a single css file which it temporarily puts under '.tmp', but as long as your scss files are in place you should not need to worry about this. My guess would be that you've somehow deleted or renamed the main.scss file; you should not be renaming this to 'main.css' for example.
I had the same issue, your main.scss file has issues with bootstrap css
I deleted the line ( 2. line )
#import 'bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';
and have no more issues. it compiles to main.css
Related
I was trying to register a vue component in the app.js file from a laravel project but I just can't seem to find the right path for the app.js, there are two files with app.js filenames. Here is my file structure:
public
css
js
app.js
resources
js
components
Articles.vue
ExampleComponent.Vue
app.js
bootstrap.js
Here is where I imported my app.js file to my blade file:
<body>
<div id="app">
<articles>
</articles>
</div>
<script type="text/javascript" src="{{ assets('js/app.js') }}"></script>
</body>
The problem is I want to access the second app.js file which is in the resources folder, but the above code keeps giving me the first app.js file which is in the public folder.
I tried giving it the absolute path to the file using this code URL::asset('resources/js/app.js')
This gives me a url like localhost:8000/resources/js/app.js which is the correct file location but somehow this link leads to a 404 page. So is there any other way to access the file?
Thanks
Firstly
localhost:8000/something always refer to something in the public directory. So, you cannot reference your resource/js/app.js in your blade file as js file.
Secondly
Actually you don't need to use the resource/js/app.js file in your blade. If you even do so, the code won't work. Because the codes in resources/js/app.js are un-compiled. You need to compile them and use them in blade files. So, where is the compiled file? It's actually the public/js/app.js file. This file is the compiled version of your resource/js/app.js.
The problem is every time you change a js file inside resource, you need to re-compile the js codes. All those codes will be merged together and will be copied in public/js/app.js.
How to compile?
Before compiling your js code you need to make sure you have installed your frontend dependencies correctly by running the npm install command.
Then if all dependencies are installed you can compile your code using the command
npm run dev for development level compile
npm run production for production level(minified and secured) compile.
If you don't want to run the npm run dev command every time you change a file, then you can run npm run watch command. This command will watch if any js file changed. If changed it will compile automatically.
Novice web dev here getting set up with SASS for the first time. Currently using Grunt to compile my css from a main SASS file.
So I have three files:
//main.css
/*some css*/
//main.scss
#import 'header';
//_header.scss
/* some sass */
When I edit and save the _header.scss file, I also have to save the main.scss file. Only then will gulp compile changes in the main.css file.
Is there a way to "autosave" every file that contains an import of a partial?
Based on what your providing I am thinking it has something to do with your main.css stuff at the top of your file. I am assuming that you have actual css below that comment in the real file?
Best practice is to #import everything at the top of the file before you do anything else.
If that is exactly what you have in the real file then it might be with how your running grunt.. Would you be able to provide your grunt config file please?
I want to override several scss files of bootstrap. The paths in my project are like this
Source code of my scss:
/src/client/sass/style.scss
Source code of bootstrap:
/bower_components/bootstrap-scss
Now if i edit the style.scss in Webstorm it cant find the import
#import "bootstrap"
Im using gulp so i created a gulp task, that generates css from default bootstrap and my additions so i dont use the WebStorm watches.
How can i configure the project, so that the #import are correctly linked to bower components? Currently im using a symlink, but it feels like a hack.
Just mark /bower_components/as Resource Root (Mark directory as/Resource root) - WebStorm will resolve imports relative to it
I have this test Wordpress site http://test.fluxmusic.net/ and I have my css and js file working, but I can't find how to make scss files work.
SCSS files must be compiled to css first before enqueuing them. You will need to install a plugin like:
https://wordpress.org/plugins/wp-scss/
Hope this helps
There seem to be a few plugins...and I'm using webstorm file watcher which also precompiles individual files.
I think this may not be the best way to setup a watcher.
I'm running this command now:
sass --no-cache --update --stop-on-error --trace ./app/sass:./app/css
It seems to conflict with the webstorm file watch, which appears to be appending everything to base.css. Can someone tell me what exactly this command is doing vs. a sass filewatcher in webstorm?
What's the best way to work with sass:
precompile my sass to css using a grunt build task
and have file watchers while developing?
My base.sass looks like this:
#charset "UTF-8";
/* DO NOT EDIT FILES IN ./css. See ./sass instead */
#import "page";
#import "modal";
#import "nav";
#import "tables";
#import "forms";
#import "message";
Your command just compiles all files in diretory ./app/sass to CSS and put the resultant files to ./app/css. Default file watcher runs the following command:
sass --no-cache --update $FileName$:$FileNameWithoutExtension$.css
i.e. it takes the current file (the one that has been changed) as input and creates a .css in the same directory. But, as you have 'track only root files' option on (default settings), the watcher creates css for the root file only - the one that reference other files via imports. You can turn this option off to change the current behavior ans get css generated for other files as well.