adding plain custom css file in laravel/vuejs2 project

Question

I am using laravel5.4 with vuejs2 to build a small project. I have just started learning vuejs2 with laravel. Using laravel-mix to compile my assets. In laravel-mix documentation i can't seem to find a way to add my own plain css file to be merged and watched.

I have my own css rules in public/css/custome.css file. what should i write in the webpack.mix.js file so that my this file is included and watched by laravel mix? Currently i have below lines in the file:

mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');

avn · Accepted Answer · 2019-02-26 16:21:43Z

3

Move your custom CSS file into resources/css folder and write the configuration below in webpack.mix.js

Note: You probably won't have a css folder in resources, so just create one.

mix.styles([
'resources/css/custom.css'
], 'public/css')

edited Feb 26, 2019 at 16:21

avn

8341 gold badge17 silver badges33 bronze badges

answered Dec 18, 2017 at 7:39

Ru Chern Chong

3,77613 gold badges36 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Yeasir Arafat Majumder Over a year ago

this does not work. i get error that mix.combine requires a full path to a filename as the last argument, whereas we are only providing a folder name (public/css).

Ru Chern Chong Over a year ago

Have a look at this, see if it helps? laravel.com/docs/5.5/mix#plain-css. And also, may I know what is the version of your laravel-mix package?

Yeasir Arafat Majumder Over a year ago

Hi Ru, i already tried this. What it does is tells the project to combine some plain css files into 1- say mycss.css,. However, my question was how do i tell the project to compile and add this mycss.css file into the central css file**(public/css/app.css)** that is watched by webpack so that i dont have to refer to this file explicitly in the header section of my application in a separate <link rel='stylesheet'> tab. I hope i was able to clarify my question?

Yeasir Arafat Majumder Over a year ago

btw, my version of mix: "laravel-mix": "^1.0"

avn Over a year ago

Just note that if you want to do this you need to make sure the order your css files are "loaded/compiled" are in the correct order or your custom css will have no effect, especially e.g. if you are overwriting bootstrap styles.

|

iceberg53 · Accepted Answer · 2018-08-31 08:26:58Z

I found a solution on Laracast and it worked for me.

Here are the steps :

Save the content of public/css/custome.css in resources/assets/sass/_custome.scss

You have to change the file extension to .scss and add an underscore at the beginning. The underscore will be useful when importing in your main app.scss file.

Import your resources/assets/sass/_custome.scss file into your resources/assets/sass/app.scss this way :

/* importing _custome.scss from the same directory containing the following files 
   resources/assets/sass/{app.scss, _custome.scss, _variables.scss} */

// import _custome.scss
@import "custome";

// import _variables.scss (custom variables for bootstrap-sass)
@import "variables";

// importing bootstrap-sass from node modules (if you are using bootstrap)
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

Include this in your webpack.mix.js file

mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');

Compile with
```
npm run dev
```

That's all.

Collectives™ on Stack Overflow

adding plain custom css file in laravel/vuejs2 project

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related