I try to use yeoman to compile a styles.sass file founded in app/styles directory.
In my index.html i write :
<!-- build:css(.tmp/styles) styles/styles.css -->
<link rel="stylesheet" href="styles/style.sass" />
<!-- endbuild -->
When i launch grunt server
Sass file is watched and compiled into
.tmp/styles/
But in my dist/styles directory, nothing is written in my xxxxxxx.styles.css
may i miss something?
Your Sass is compiled into .tmp/styles when running grunt server, since it's only temporary. This is done so not to create a mess of compiled CSS files in your app directory. When you run grunt it will compile it to the dist/styles folder.
Related
I download source code from this link
https://www.onlinetutorialspoint.com/spring/spring-mvc-login-form-example.html
https://www.onlinetutorialspoint.com/wp-content/plugins/download-attachments/includes/download.php?id=206
I can run it well and I want to include bootstrap css to project.
In this project they setup config:
<resources mapping="/resources/**" location="/resources/" />
I tried to add bootstrap.css to resources folder and include it in head tag of jsp file.
But it can not read css file.
<link href="<c:url value="/resources/bootstrap.min.css" />" rel="stylesheet">
I added css to /webapp/resources folder.
Here are my project file structure.
What is problem in my source code?
<mvc:resources mapping="/resources/**" location="/resources/" />
this resources folder is placed under the main (main/resources) folder by default. hence, please move bootstrap.min.css file into main/resources.
Finally, I changed spring mvc from 3.x to version 4, it worked.
Is there a difference between the two codes below? The reason I'm asking is because when I use the first one the code work as expected but I get a file reference warning at the at the icon in the top-right corner of the PHPStorm in my .blade.php file!
The error is:
File reference problem
Cannot resolve directory plugins
Cannot resolve directory datatables-bs4
Cannot resolve directory css
Cannot resolve directory dataTables.bootstrap4.min.css
"
<link rel="stylesheet" href="/admin/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="{{ asset('admin/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
I'm using some sass compilers to convert my scss files to css, but in one of the scss files I'm importing some css files from node_modules folder, along with other scss files from my src folder. Those css imports are included as url imports in the resultant css file instead of copying the contents of the file, and the scss imports are nicely copied over as contents.
I can't rename these css files to scss as they are in node modules.
Any workaround?
We've a project in Idea with some typescript files and use an ant file to transpile it generating the matching js and map files.
When debugging through IDEA (html file) breakpoints in the typescript files do not work and we don't see the map files in chrome even though existing.
What is the expected structure of the js, ts and map files for debugging typescript with IDEA ?
Debugging with chrome/firefox is fine.
You have to install Jetbrains IDE Support extension for Chrome (I also allowed this extension on incognito - chrome://extensions) and a plugin named Javascript Debugger for Intellij Idea or Webstorm (it needs Spy-js and NodeJs plugins to be enabled also).
After that you just have to do a right click on your project's .html file and click on 'Debug your-html.html'
Update: Sourcemap files are needed to debug, while compiling typescript --sourcemap option must be set.
I just ran into this. However I am not working on a frontend project.. but it might help just as well.
To debug in intellij, I first compile my typescript files.
I defined tsconfig.json
I used tsc -p tsconfig.json to compile.
To make debugging work I did the following
Added "sourceMap": true to tsconfig.json
I ran the compiled js file
==> debug just works when I put a breakpoint in the ts file.
Let me know if this does not resolve your scenario, I will investigate an modify the answer.
This is the project I am working on for reference: https://github.com/coder-on-deck/easy-typescript-setup
I have this file structure and wacther configuration:
The problem is that when I save my scss file the css file is updated in IDE only if I switch focus from IDE window and back again.
P.S.: if I configure scss watcher to compile css files in the same directory where source scss files are located, then css files are uptated right after compilation(as it should).
As suggested in my comment: alter your path in "Output paths to refresh" to point to the actual output file (as in "Arguments" field) and not just folder: i.e. add /$FileNameWithoutExtension$.css at the end.