I am working on a laravel project and had written some CSS codes inapp.css. When I started building Vue components, the app.css codes stopped being rendered. The file is being fetched as <link href="{{ asset('/css/app.css') }}" rel="stylesheet">. The CSS does not reflect but font-awesome icons which are fetched in the same way are appearing. What could make this happen?
`
What would make css to stop working after starting Vue in laravel?
Viewed 42
1 Answers
If I am reading your question correctly I will make a couple of assumptions and give what I think may have happened.
I read you edited app.css and then worked with your compiled system.
I am guessing you did this via npm run dev or a variation there of.
Upon doing this, it writes a new app.css file based on your app.scss file.
So, I am thinking that when you compiled your app you wiped out app.css as it should and rewrote the app.css with the build out of app.scss.
You should be having your css in app.scss or in a file that @import that file.
And to then to compile your css with npm run dev, npm run prod, or npm run watch
If you want to mix in css with app.scss you can either use the @import mentioned above or combine them via webpack.
To add font awesome to the app.css you do so with:
npm i @fortawesome/fontawesome-free- Add the following to
app.scss:
// Font Awesome
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/v4-shims";
- Compile with
npm run devornpm run prod
Related