I got in my index.js
import './styles/index.css';
import './styles/responsive.css';
the index.css contains browser desktop styling while the responsive.css will overwrite when the screen gets smaller like in mobile.
In development this works just fine, but using the compiled css after running npm run build makes the responsive styling messed up. After trying to debug I found that in build/static/css/main*.chunk.css the entries from responsive.css went first than the index.css and that created the problem.
is there any way to correct the issue? i could combine the responsive.css into index.css but I feel that's just a workaround
I believe there is no answer to your question. If you google for 'wrong css order' you may found github issues for webpack older than 2 years. Like that one https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/548 and there are many others.
I have solved this by combining styles into one file. I use scss so did something like:
// main.scss
#import 'globals';
#import 'responsive';
and in js
import main.scss
Related
I'm building a project with .vue files which make it possible to write the CSS (SASS), JS and HTML in the same file.
I've decided to have some global components written in SASS on a assets/styles/app.scss file which will load my grid, variables and mixins.
On top of that, I want to be able to write some local SASS rules depending the component / page I'm on, seems pretty logical to want both in a project ...
Locally it looks like this:
<template>
</template>
<script>
</script>
<style lang="scss">
#import "assets/styles/app";
.my-style {
color: $my-variable;
}
</style>
It actually works, for instance I can use $my-variable in my local .vue file or any mixin I want. The problem is a VueJS project will grow and components will go together to display a page.
I noticed the global styling was loaded on each component, and the same rule is present in 5x, 10x when I open my chrome developer tool. This is still a very small project; all my styles are basically duplicated and loaded by the browser each time I add a component to the same page.
How do you avoid to load multiple times the global styles, while being able to use global SASS code in each components?
I've never worked with local mixed with global styling before, I preferred to just abstract totally the styling into a separated structure, but this is way more convenient to code with everything local in the same place.
What am I doing wrong here?
Detail: I'm on NuxtJS but I believe this issue is more related to VueJS overall.
Basically, every time you do an #import in your components it appends another copy to the main CSS file that Webpack generates.
Assuming you have the Webpack SCSS loader properly configured (which I believe you do since it compiles), you should be able to import the SCSS file once in your app.vue and the SCSS compiler will find it when it appends all other CSS.
For example, getting global fonts and mixins:
<style lang="scss">
#import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&subset=latin-ext');
#import "#/scss/mixins.scss";
</style>
Then create your CSS for each component inside the component's <style> section. Just make sure you add the lang="scss" so it all compiles.
You might also want to look into scss-resource-loader for Webpack. I think this is in the newest CLI builds, not sure about Nuxt.
in App.vue
<style lang="scss">
#import "assets/styles/common.scss";
</style>
OR
import compiled sass to css file in main.js
import './assets/styles/common.css';
I am following a tutorial to set up my bootstrap 4 environment by using node package management and sass. I installed bootstrap using npm install bootstrap command and then import the source code to a main.scss file using the #import "node_modules/bootstrap/scss/bootstrap". I then installed Ruby and SASS with gem install sass, so it enables me to run sass main.scss main.css to convert boostrap file to a css file that can be link to the html file.
However, the boostrap code only works in IE but no Google Chrome. I inspected the code in google chrome and it seems it is reading the code all right, but don't know why bootstrap is not working in this case as you can see the form is not styled at all. so confused now.
I searched for what cause the problem and found out that there is someone's answer that might be relevant to my problem:
IE and Edge are not fussy : stylesheets are rendered regardless of
the encodings. But Chrome is totally intolerant of unmatched
encodings.
How can I change the unicode for my css file when it is generated by sass in the background? In addition, how to change the code to meet the same standard as my html file? is this unicode related issue??
I guess there is no point to show the code since main.css was created by sass for Bootstrap 4. I am not sure if someone has experienced a similar situation and know what I am talking about?
Try installing node-sass (https://www.npmjs.com/package/node-sass), and also install "npm install bootstrap" and import it as 'bootstrap/dist/css/bootstrap.min.css' which will import bootstrap4 (latest)
I am having a problem working with font awesome 5 and sass I have followed the instructions on their webpage to get started but i can seem to get the icons to appear i have a directory
C:\Users\myName\Learn\public\scss\vendors\font-awesome\fontawesome.scss
in my public\scss folder i have a home.scss file where i import fontawesome.scss as follows
#import "vendors/font-awesome/fontawesome.scss";
when i compile the code it shows the fontawesome classes and stuff when i look on the webpage there are no fonts just big white square further research tells me its not loading the webfonts i placed the webfonts folder inside my project in this directory
C:\Users\myName\Learn\public/webfonts
and in the _variables.scss file i modified the fa-path to point to
"../webfonts"; but this nothing works I would really appreciate any insight that would help me solve this problem because following the instructions online for font awesome 5 with sass doesn't seem to be working for me.
Your folder structure is a bit different, but it should give you a general idea.
// In your main scss file
#import "FontAwesome/fontawesome.scss";
#import "FontAwesome/fa-light.scss";
// In your font awesome variables
$fa-font-path: "../WebFonts" !default;
// Folder structure
/stylesheets/mycompiled.css
// Webfont location
/stylesheets/WebFonts
Its possible that you didn't import either a Light/Regular/Solid part, as everything else seems fine.
If still having issues, you can specify an absolute path (assuming /public is your root)
$fa-font-path: "/WebFonts" !default;
Using absolute path, mine works as
$fa-font-path: "/stylesheets/WebFonts" !default;
As some of the packages are now deprecated I've compiled what I needed to do in order to make FontAwesome 5 Free work with React and Typescript.
Here is how I've solved, considering the solutions posted by (#alexsasharegan and #cchamberlain):
My architecture:
React 16.7.0
Typescript 3.3.1
Bulma 0.7.2 (similar to bootstrap)
FontAwesome 5.7.1
1) Package.json (FontAwesome packages I've used. You can switch to FAR or FAL)
(...)
"dependencies": {
"#fortawesome/fontawesome-free": "^5.7.1",
"#fortawesome/free-solid-svg-icons": "^5.7.1",
};
(...)
2) In your webpack.config (very essential):
(...)
{
test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
use: "url-loader?limit=100000"
}
(...)
3) In your main scss file :
$fa-font-path : "~#fortawesome/fontawesome-free/webfonts";
#import "./node_modules/#fortawesome/fontawesome-free/scss/fontawesome.scss";
#import "./node_modules/#fortawesome/fontawesome-free/scss/solid.scss";
4) That will allow you to use Font Awesome like this:
<i className="fas fa-check" />
Just in time: if you want to use FontAwesome as a component, look at their documentation that well explains how to import the JS files to put it to work.
https://fontawesome.com/how-to-use/on-the-web/using-with/react
Hope it helps and I've posted here because since last message some packages changed.
I believe a picture best describes my issue
https://postimg.org/gallery/37bdm2lp8/
Please see img for tree document
https://postimg.org/image/qsmm9rdx1/
My issue is a simple one, but I am not getting my main.sass which imports all the other sass files to for compiling to display the bourbon assets, so my site isnt rendering the bourbon assets
I have tried the basic #import ../css/1-tools/bourbon but that doesnt work
Any help appreciated as the css isnt working now :(
Since you are all ready using gulp, try using the actual Bourbon NPM package. You can add it to your package.json file and require it via your gulpfile.
How to: https://github.com/thoughtbot/bourbon#installing-with-npm-and-using-a-node-based-asset-pipeline
Here is the page for the Bourbon package: https://www.npmjs.com/package/bourbon
Here is an example gulpfile that uses bourbon (with some other stuff you can probably ignore): https://github.com/thoughtbot/bitters/blob/master/Gulpfile.js
The main parts of this example gulpfile that you would need to add are the require on line 1 and adding bourbon to your Sass includePaths on line 17.
edit ⤵
Once this is set up you'll want to change your sass import to the following:
#import "bourbon";
Because of the addition to includePaths, gulp-sass will know where to look. 🔎
i have a simple but for me rather an important question. I will start a clean Project with Less and wanna include bootstrap. So my basic style.less file would look like this:
// Bootstrap Corefile
#import "bootstrap.less";
// My own Styles
header {
.make-row();
}
is this logical correct because now the bootstrap and my own styles are compressed in one file. In addition I would have a pretty big css file... And what if I want to use another css file from external plugins.
I would like to know if someone has already experience with it?
Yeah that will work. If you want to add another file you can just import that as well.
One thing that you do have to be careful of is that in the earlier version of IE it has a max number of classes it process. I can't remember off the top of my head but I think it is somewhere near 1000. So if the css at the end of the file isnt working in IE thats why.
Here is a line to the documentation to see what you can do with it. Check out the import section.