I am currently using a setup with NO Bower and ONLY using NPM with Gulp for AngularJS. I installed Font-Awesome from npm. I am also using SASS/SCSS for this.
The stylesheet is already loaded whenever i would run gulp serve as I have checked it using the developers tools in chrome, but the fonts are not loaded with it as I am outputted with a 404 when loading the font-awesome fonts.
I used the $fa-font-path variable with it. I imported it using:
$fa-font-path: "node_modules/font-awesome/fonts/";
#import "node_modules/font-awesome/scss/font-awesome";
Bootstrap-Sass is working fine and loading its font values using $icon-font-path despite of the fonts not being in the folder being served using:
$icon-font-path: "node_modules/bootstrap-sass/assets/fonts/bootstrap/";
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
I've tried importing it using CDN and it is fully working, but I do NOT want to use the CDN as an exception for this as I am using NPM for all my dependencies with this.
So, why is font-awesome not working? Am I doing something wrong with my setup?
Related
I've create a test application with Ionic v5 w/React and I don't see any specifics in the documentation on how to configure Sass preprocessing. I have a couple sass files in the project structure, but they don't seem to be loading or being processed for that matter. I added node-sass to the package.json. Any help would be much appreciated. I used the Ionic Cli to created a blank app and added some .scss files to the project dir.
So I figured it out. Turns that ionic looks at the themes directory for all style sheets, including scss sheets. So I simply place my scss files there, ran ionic serve and imported the base style sheet, import '/theme/styles.scss' into the "main" component and it worked. I could run ionic build command see that the scss files were processed and minified into a .css file.
So just to make it clear that you do need to install node-sass via npm or yarn in order for Ionic to support scss files after that you can change any files whether it’s inside pages or components or theme folder and you just have to update the import to scss instead of css
Command for Installation
npm install --save-dev node-sass
Import changes
We need to support IE11 with our app.
When building it with react-scripts build the backticks in template literals won't be transpiled, which of course doesn't work for IE.
The error appears in the chunks/vendor js file - not sure if that changes anything.
Is there any way to add some config with webpack plugins in react-scripts? We're on 2.1.5.
Ejecting from npm isn't an option.
So we just found out that it indeed was an error in a npm module.
Now we made a PR for it.
I am learning React and I have already created a few apps with CRA.
I haven't found a good and easy way to include sass on my react projects so I came up with this:
install node-sass on the src folder
add this to the package.json:
"node:sass": "node-sass src/index.scss src/index.css -w"
then on each component, I would add a sass partial file, so I could keep the style and the js file in the same folder.
is there any problems with doing that?
I've read some tutorials to config webpack to use sass but it sounded to complicated.
Including partials per component is just fine and actually encouraged as a standard. Then you include it in the webpack with the ExtractTextPlugin, which allows you to bundle all your sass files into a single css file that you import in index.html. You can see an example here: https://github.com/ianshowell/react-serverless-kickstart/blob/master/webpack.common.js#L46
For this to work, you also need to include the sass-loader which will let your Js files parse your Sass class names. Feel free to use my starter pack that the above code is linked in to help you figure it all out.
Edit: Also, take a look at this example component to see how importing styles works: https://github.com/ianshowell/react-serverless-kickstart/tree/master/src/components/TodoItem
If you want to use sass in your react app, install chokidar
It will help you:
https://www.npmjs.com/package/react-scripts-sass-chokidar
Create react app v2, support SASS out of the box (https://reactjs.org/blog/2018/10/01/create-react-app-v2.html)
Here a link to read the documentation: https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav
All you need is to install node-sass if not already
npm i node-sass --save-dev
And then make sure you import files with scss extension.
If you need to change old css files, change the extension, and so follow with the imports.
I will be using Semantic-UI-React in my project but I came across following issues:
Docs link : https://react.semantic-ui.com/usage#css
Docs say webpack 1 is supported but not recommended. I am using Create React App which comes with webpack version 1.14.0. So does that mean I should not use Semantic-UI-React with CRA?
For styling, I also want some custom styles in my project , so I went with third option of Semantic UI package mentioned in the docs..
npm install semantic-ui --save-dev runs gulp internally and creates a semantic folder. But there is no dist folder as mentioned in the docs. From which path I should refer the semantic.min.css in my index.js file?
I am basically trying to use Semantic-UI-React with semantic.min.css with some of my own styles on top of it. But it seems I am making some mistake in the setup. Another option may be to go ahead with Semantic UI CSS package ? ...but according to docs I will not be able to use custom styles with this method.
I am a bit confused here , please help :)
The SUI-React docs comment about not recommending use of Webpack 1 is simply because it's not the latest version of Webpack. Webpack 1 still works fine in general. Also, the current version of Create-React-App (1.0) uses Webpack 2, and if you haven't "ejected" your CRA project, you can easily upgrade the react-scripts dependency to use the latest version.
If you want to build a custom Semantic-UI CSS file, yes, you would install the semantic-ui package, and that will create a semantic folder containing Semantic-UI's LESS source files and build system. From there, you would make any edits to SUI's source for your customization. Once you've made your edits, run gulp build inside that semantic folder, and it will create a semantic/dist folder containing the compiled CSS files (per the instructions at https://semantic-ui.com/introduction/build-tools.html ). Finally, you would copy the generated CSS files into your project, probably inside the src folder, and import those in your JS source.
If you don't care about generating a customized Semantic-UI CSS build, you can npm install --save semantic-ui-css, which has a pre-built version of the default Semantic-UI theme, and import the CSS from there.
For what it's worth, my own "Practical Redux" tutorial series uses Semantic-UI-React and the semantic-ui-css package, and I show how to add semantic-ui-css in Practical Redux, Part 4: UI Layout and Project Structure. (I've also used a custom Semantic-UI CSS build in my "real" project at work.)
I created my angular application with "yeoman" using "yo angular" with grunt sass bootstrap.
But with node_mudules bower_component and all dev feature the empty project is 200mo sized
How can I build my application for production, include minify css/js and keep only used and required dependance.
EDIT
I don't understand the -1, thousand people use the angular-generator from yeoman and I can't find a build tutorial for this specific generator.
grunt build seems to work but the website is not displaying well.
grunt serve:dist build and run on serve but same problem as grunt build
The dev application ( it s just yo angular empty project )
After grunt serve, it works and i can navigate
After grunt serve:dist, it doesn't work and i can't navigate, it seems like "bower_components" are not build well
if you are using grunt do: "grunt build" or "grunt serve:dist", after the build you will get a dist folder, everything inside is you production app included minify css/js, you don't need anymore. And specify that for unknow reason "yo angular" add jquery to "devDependencies" but not in "dependencies"
in bower.json in you project.
You do not need to deploy everything from your project folder. Hope it help.
You do not need to deploy everything from your project folder. You can find info on this page.
Only files which you include/import in your index.html or css ( images or fonts ), are being used and tracked. Rest are all useless after deployment.
run gulp --production. firts it will clean dist folder (if exist) then move the minified and uglified file there.