I had issue on importing a new .scss to a whole new page template vue which has different from the main scss file. I found this link but still my new styles won't work. By the way, I use laravel 5.4.
New vue component:
<style lang="scss" scoped>
#import "~sass/new"; //new scss file from resources/sass directory
</style>
I think I miss a library to install or what. Any help would be much appreciated.
Check if you have installed 'sass-loader' 'node-sass' 'style-loader'
if not then install it using below command
npm install sass-loader node-sass style-loader --save-dev
See if you package.json is similar to this
"devDependencies": {
"css-loader": "^0.23.1",
"node-sass": "^4.1.1",
"sass-loader": "^3.2.3",
"style-loader": "^0.13.1"
"vue-loader": "^9.0.0",
"vue-router": "^2.1.1",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.0"
}
Then you can try
<style lang="scss" scoped>
#import 'main.scss'
</style>
This article must be helpful to you Using SASS/SCSS in Vue.js 2
Related
I have started a new laravel project (my first). I have created some views and routs etc, but bootstrap is not working. I am using laravel 7.
I have followed these steps: https://www.techiediaries.com/laravel/how-to-install-bootstrap-in-laravel-6-7-by-example/ which seemed to work as it should
^which added bootstrap in the package.json file: but still it's not working.
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^7.0",
"jquery": "^3.2",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^3.1.0",
"sass": "^1.15.2",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.11"
}
have I done anything wrong? do I have to link it in some way or another?
Any help is greatly appreciated!
Did you run:
npm run dev
after npm install? The webpage only says the first command.
Did you put these script src and css links to the head of the html?(after compile)
<link rel="stylesheet" href="css/app.css">
<script src="js/app.js"></script>
Im using laravel 5.2
Package.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"bootstrap-sass": "^3.0.0",
"gulp": "^3.9.1",
"laravel-elixir": "^5.0.0",
"laravel-elixir-webpack": "^1.0.1",
"laravel-elixir-webpack-official": "^1.0.2",
"laravel-mix": "^2.1.14",
"lodash": "^4.16.2",
"vue": "^2.0.1",
"vue-resource": "^1.0.3",
"webpack": "^2.7.0"
},
"dependencies": {
"get-ssl-certificate": "^2.1.2",
"laravel-elixir-webpack-official": "^1.0.2",
"vuedraggable": "^2.16.0"
}
}
I tried both firefox and google chrome extension which says its disabled
This is the line that restrict this
devtools: process.env.NODE_ENV !== 'production'
to my two sense this must NOT happen.
Steps I took till now :
1- remove node_models install it again using npm install
2- replacing the vue file with a version provided in Vuejs.org
the icon is there colorful but no Veo devtool, when i use CDN on top of my header instead i get the devtools!
What is causing this conflict! Im confused
thanks for any help
Okay long story short the problem caused because it was not compiling my files and devmode was off in the version it was complied before.
I was trying to use vue on laravel 5.2 , faced many problems so i decided to install
laravel 5.3 by :
composer create-project --prefer-dist laravel/laravel myapp "5.3.0"
after that I executed :
npm install
and it started to install the dependencies and all , when it was done I tested gulp command to see if its a success compile which it was. so I moved package.json package-lock.json and gulpfile.js from my Laravel 5.3 to laravel 5.2 run npm install again and all Done!
I try to use SweetAlert with Laravel 5.5 usin Larvel Mix, but not work properly
webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.copy('node_modules/sweetalert/dist', 'public/js');
package.json
"devDependencies": {
...
"bootstrap-sass": "^3.3.7",
...
"jquery": "^3.2",
"laravel-mix": "^1.0",
"sweetalert": "^2.0.8",
resource/assets/sass/app.css
// Sweet Alert
#import url("https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css");
when I execute npm run dev compiling without any errors.
But when I use with this method, alerts show without CSS style of SweetAlert.
After
npm install sweetalert2 --save
you should do like below in your app.js:
window.Swal = require('sweetalert2');
Or
#import "~sweetalert2";
In your resources/assets/sass/app.scss file,
Use this line instead
#import "~sweetalert2";
What you were doing (importing the CSS from a CDN) has nothing to do with npm at all.
Step 1: npm install sweetalert --save run this command in your terminal/cmd.
Step 2: In your resources/js/app.js file, simply import it into your application import swal from 'sweetalert';
I use laravel 5.5, built-in webpack
Module build failed: Error:
Vue packages version mismatch:
- vue#2.5.2
- vue-template-compiler#2.4.4
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader#>=10.0, simply update vue-template-compiler.
If you are using vue-loader#<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
what's wrong? there is my package.json
{
"devDependencies": {
"cross-env": "^5.0.5",
"laravel-mix": "^1.5.0"
},
"dependencies": {
"axios": "^0.16.2",
"bootbox": "^4.4.0",
"bootstrap": "^4.0.0-beta",
"font-awesome": "^4.7.0",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"marked": "^0.3.6",
"normalize.css": "^7.0.0",
"popper.js": "^1.12.5",
"vue": "^2.5.2",
"vue-loader": "^13.3.0",
"vue-localstorage": "^0.4.2",
"vue-markdown": "^2.2.4",
"vue-masked-input": "^0.5.2",
"vue-simplemde": "^0.4.5",
"vue-template-compiler": "^2.4.4",
"vue-upload-component": "^2.6.0-beta.3"
}
}
even if I change "vue-template-compiler" to 2.5.2 - it not helps
npm update --scripts-prepend-node-path=auto helps
re-install vue-loader or just delete node_modules folder and run
npm install
Using Laravel 5.4 / Webpack, I solved this with:
1.) npm install vue-loader
2.) npm install vue-template-compiler
Only runing npm install the problem was solved. Then, npm run dev and everything was ok.
Try to use the same version number:
"vue": "^2.5.2",
"vue-template-compiler": "^2.5.2",
I have set up a Gulp environment, with the intention of compiling and minifying SASS with Compass.
I have created my gulpfile with all the required tasks, all my packages are installed and running, the SASS is compiling and minifying absolutely fine, until I try and add:
#import "compass";
I have Compass installed on my Mac, and the node_package is installed, but when I run the gulp task, I get this error:
error style.scss (Line 15: File to import not found or unreadable: compass
I just can't work out what the issue is here. I have seen many questions on Stackoverflow with people who are running into the same issue, and I have tried everything.
I have tried installing the --pre version on Compass, I have tried uninstalling Compass and SASS, and reinstalling them again, but nothing.
Here are my devDependencies in my package.json:
"devDependencies": {
"gulp": "^3.8.8",
"gulp-compass": "^1.3.2",
"gulp-concat": "^2.4.1",
"gulp-minify-css": "^0.3.10",
"gulp-ruby-sass": "^0.7.1",
"gulp-uglify": "^1.0.1",
"gulp-util": "^3.0.1"
}
The styles gulp task in my gulpfile.js:
gulp.task('styles', function () {
return gulp.src('../source/sass/style.scss')
.pipe(sass({sourcemap: true, sourcemapPath: 'style.css'}))
.on('error', function (err) { console.log(err.message); })
.pipe(minifyCSS())
.pipe(gulp.dest('../public/_/'));
});
And finally the gulp task that puts everything together:
gulp.task('default',['scripts', 'styles', 'watch']);
Any help would be greatly appreciated. As I say, everything is working fine. The watch task runs and compiles my SASS and Javascript when a change has been made. It just breaks when I try and import Compass.
You've installed gulp-compass, but you're not using it in your task, so it is not supposed to work.
Since you're using gulp-ruby-sass, I think you should use its compass option and set it to true, and remove the unused gulp-compass module.
Your task would look like something like this:
gulp.task('styles', function () {
return gulp.src('../source/sass/style.scss')
.pipe(sass({ compass: true, sourcemap: true, sourcemapPath: 'style.css'}))
.on('error', function (err) { console.log(err.message) })
.pipe(minifyCSS())
.pipe(gulp.dest('../public/_/'))
})