I would like to add my own css file into a Jhipster project.
I put those files in src\main\webapp\assets\styles\
The gruntfile.js should be able to add those files into the depencies am I right ?
But they added ... any idea why ?
Thanks
Yes if you put a file into this directory, it will belong to your project (that's kind of obvious, as it's the CSS folder of your project).
I guess that what you want to do is use this file inside your index.html file. The normal grunt wiredep command works only if you use Bower, which is our JavaScript/CSS dependency package manager. In your case, you are just adding the file manually, so you are not using Bower: just add your file inside the index.html file, as would do in a normal project, outside of the Bower tags, and you will be able to use it.
Related
I installed Bootstrap CSS with SASS from the following repo:
https://github.com/twbs/bootstrap-sass
I ran the command "bower install bootstrap-sass" on the command line and this successfully installed the folder bower_components on my project folder. (Incidentally - I have nothing else present yet, I want to learn to bootstrap the CSS compiling first).
OK, here's what I want to accomplish:
I want to be able to add .scss files to the folder I create called resources/assets/sass/
I want to provision/manage so that .scss files I add to this directory are in turn compiled to public/build/css/that_file_name.css
More practically, I would like to compile all of the .scss files into one large .css file.
My question(s) are:
What does the compiling?
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
What does the compiling?
Compiling Sass files transforms stylesheets with Sass-specific syntax like selector nesting and mixins into normal CSS that can be parsed by browsers.
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Since you're already using Bower which is a Node.js package, I assume that you have no problem using the Node.js package node-sass instead of the original Ruby version.
First, install the package using npm i -D node-sass. Then, create a new script inside your project's package.json:
"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"
main.scss is now your entry point where you import Bootstrap and your other stylesheets.
// I don't know whether this path is correct
// Just find out the location of "_bootstrap.scss" and then create the relative path
#import "../../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
/* Your custom SCSS */
Finally, to actually run the compilation, execute npm run compile-sass in your terminal.
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Since you never tell node-sass to "compile everything inside this folder" and instead use an entry point file (main.js), when you want to include a new file you simply add an #import directive with a relative path to it.
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
To minify the resulting main.css file, I recommend csso. You can install its CLI package using npm i -D csso-cli and then add another script to your package.json:
"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"
You can then run that script using npm run minify-css. The minified file will be outputted as main.min.css.
For all the question asked, the answer can be found above. But if you are just looking to compile .scss file to .css using command line, use below,
sass source/stylesheets/index.scss build/stylesheets/index.css
Make sure you have "node JS/npm" and Sass compiler installed.
If not, use this to install Node.js and npm - https://www.npmjs.com/get-npm
And use this to install Sass - https://sass-lang.com/install
Enjoy ;)
I've got a Meteor project with the following file structure:
.meteor
client
dashboard
dashboard.scss
client.scss
My basic sass file is client.scss that resides in client folder.
If I define $flat-button in client.scss. Then I cannot use it in dashboard.css without adding import '../client';. However when I do this in multiple files this causes duplicate entries in the unified css file. If I don't import it then Meteor reports errors due to not finding the variable.
Should I add settings to the sass compiler to get this working?
If you're using the fourseven:scss package to compile the Sass in your Meteor project, you simply need to prefix the filenames of your imported .scss files with an underscore, which is the standard method of naming a partial stylesheet with Sass.
In your case, your folder and file structure should be changed to:
.meteor
client
dashboard
_dashboard.scss
client.scss
And then you should be able to use an #import statement to include _dashboard.scss in client.scss like so:
#import 'dashboard'
If for some reason you don't want to rename your files that way, you can also use the .scssimport extension for the same result.
Hope that helps!
How do I change the bower_components directory to something custom when using grunt for development? I want to set a custom folder such as scripts for all my libraries.
Add and use .bowerrc file to define bower_components custom path. (http://bower.io/docs/config/)
I'm trying to follow the Zurb Foundation "manually installation".
According to the instructions:
First you will need to clone or download the master zip of the
Foundation Compass Template from Github. This will be the root of
your project.
Then you will create a directory called bower_components.
The next step is to clone or download the master zip of the
bower-foundation repo in that directory.
Then rename this directory to "foundation".
And then it says that the filelist should be like this after following all the instructions:
bower_components (folder)
js (folder)
app.js
scss (folder)
_settings.scss
app.scss
stylesheets (folder)
app.css
bower.json
config.rb
humans.txt
index.html
robots.txt
Now, I'm probably missing something really silly here, but there's no way that following those instructions I get that file structure.
For a starter, there's no .rb file, and bower-foundation has a foundation and vendor folders inside the js folder! And how about the spec folder that's inside the foundation-master zip file? And you get more than one scss folder.
So, maybe I'm somewhat burnout and don't quite understand the instructions properly?
Just in case anyone out there happens to bump into the same issue, I've solved it following their video instructions to do it with the CLI (using the command line).
After doing it (it's pretty fast and straightforward), I can confirm that their "manual instructions" are NOT correct, so please, up until they update them you should NOT use those instructions.
I am using Netbeans 8.0 to edit my HTML, PHP, and CSS. Just today I have installed SASS and enabled it within Netbeans. I am developing on Ubuntu, and Ruby and Sass are both available in the repositories, so I installed them and Netbeans found the SASS executable with the click of a button. So, I assume it's all working.
I have created a file called style.scss, and put in some test colour variables and a dummy #test id.
My understanding was that when I saved the .scss file that it would get processed and a .css file with the same name, in this case style.css, would get created. Or updated if it already existed.
Is this not the case? I did see other SASS and .css file generation questions here on Stack Overflow, but I didn't see one specific to Netbeans, so I'm not sure if there's something I haven't set up correctly in my environment. Also, I don't need to upload to a server when saving, I am just testing and developing locally.
How do I actually generate a .css file from my .scss in Netbeans 8.0?
Right click on the project -> Properties -> CSS Preprocessors
You have to set an input folder, for example /scss, and an output folder like /css
And there is a checkbox "Compile Sass files on save".
For Compiler options " --style compact " can be useful.
This was working for me in NB7.4, but in 8, something happened...
The plugin page says, it's currently incompatible with 8.
http://plugins.netbeans.org/plugin/34929
UPDATE: My scss folder was wrong... So it's working in NB8.
Look # the project settings, and separate your .scss and .css files in two folder, the default folders are /scss and it converts files to /css folder