In a fresh Laravel 9 installation, the URL processing from Laravel Mix does not work anymore.
npm outputs the following:
✖ Mix
Compiled with some errors in 2.62s
ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve './fonts/Inter-Regular.woff' in '/mnt/c/projects/test-project/resources/css'
at finishWithoutResolve (/mnt/c/projects/test-project/node_modules/enhanced-resolve/lib/Resolver.js:304:18)
at /mnt/c/projects/test-project/node_modules/enhanced-resolve/lib/Resolver.js:381:15
at /mnt/c/projects/test-project/node_modules/enhanced-resolve/lib/Resolver.js:430:5
at eval (eval at create (/mnt/c/projects/test-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
at /mnt/c/projects/test-project/node_modules/enhanced-resolve/lib/Resolver.js:430:5
at eval (eval at create (/mnt/c/projects/test-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
at /mnt/c/projects/test-project/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:87:43
at /mnt/c/projects/test-project/node_modules/enhanced-resolve/lib/Resolver.js:430:5
at eval (eval at create (/mnt/c/projects/test-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /mnt/c/projects/test-project/node_modules/enhanced-resolve/lib/Resolver.js:430:5
at processResult (/mnt/c/projects/test-project/node_modules/webpack/lib/NormalModule.js:753:19)
at /mnt/c/projects/test-project/node_modules/webpack/lib/NormalModule.js:855:5
at /mnt/c/projects/test-project/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /mnt/c/projects/test-project/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/mnt/c/projects/test-project/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/mnt/c/projects/test-project/node_modules/css-loader/dist/index.js:155:5)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors
The font file is just one of many. My app.css looks like this:
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
#import 'primevue/resources/primevue.css';
#import 'primevue/resources/themes/lara-light-indigo/theme.css';
#import 'primeflex/primeflex.css';
#import 'primeicons/primeicons.css';
The package.json contains the following dependencies/versions:
"devDependencies": {
"#inertiajs/inertia": "^0.10.0",
"#inertiajs/inertia-vue3": "^0.5.1",
"#inertiajs/progress": "^0.2.6",
"#tailwindcss/forms": "^0.4.0",
"#vue/compiler-sfc": "^3.0.5",
"autoprefixer": "^10.2.4",
"axios": "^0.25",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.2.13",
"postcss-import": "^14.0.1",
"tailwindcss": "^3.0.0",
"vue": "^3.0.5",
"vue-loader": "^16.1.2"
},
"dependencies": {
"primeflex": "^3.1.2",
"primeicons": "^5.0.0",
"primevue": "^3.11.1",
"vue-i18n": "^9.1.9"
}
The webpack.mix.js is default:
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
])
.webpackConfig(require('./webpack.config'));
Is there something I haven't seen?
Actually moving the css imports into resources/js/app.js solves this problem. However, this results in the imported css to be included in the public/js/app.js, not the public/css/app.css.
The problem occured because of your resources/css/app.css can't render #tailwind import
Try to clear resources/css/app.css or chnage the version of installed tailwind and retry, it will work well
Related
When I use Scss in rollup, and When I build project then there is a error:
[!] Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript)
components/styles/index.scss (3:0)
1: #import 'variables';
I tried some methods but not success, such as rollup-plugin-postcss or rollup-plugin-scss. And I changed sass to node-sass, but another problem appear because I used a syntax like $spacer / 2.
This is my package.json
"devDependencies": {
"#babel/core": "^7.18.6",
"#babel/preset-env": "^7.18.6",
"#babel/preset-react": "^7.18.6",
"#babel/preset-typescript": "^7.18.6",
"#rollup/plugin-babel": "^5.3.1",
"#rollup/plugin-commonjs": "^22.0.1",
"#rollup/plugin-json": "^4.1.0",
"#rollup/plugin-node-resolve": "^13.3.0",
"#rollup/plugin-replace": "^4.0.0",
"#types/classnames": "^2.3.1",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"#types/react-transition-group": "^4.4.4",
"cross-env": "^7.0.3",
"node-sass": "6.0.1",
"postcss": "^8.4.14",
"react": "^17.0.2",
"react-dom": "17.0.2",
"rollup": "^2.76.0",
"rollup-plugin-css-porter": "^1.0.2",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-postcss-retain-sass-data": "^2.0.3",
"rollup-plugin-scss": "^3.0.0",
"rollup-plugin-styles": "^4.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.32.1",
"sass": "^1.53.0",
"typescript": "^4.7.4"
}
This is index.scss
#import 'variables';
// layout
#import 'normalize';
// mixin
#import './mixins';
// animation
#import './animation';
// alert
#import '../Alert/style';
Is there some methods to solve this problem?
I was having the same issue with importing css file, the error was [!] Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript). as rollup is suggesting to install the required plugin, I installed rollup-plugin-import-css and now it's working fine.
In your case which your file is sass you can try rollup-plugin-sass
I have a default Laravel project which is scaffold with Bootstrap and Vue.js.
Having considered to use Laravel JetStream Livewire, I am going to remove bootstrap because Laravel JetStreal Livewire is using TailwindCSS and we can not use both Bootstrap and TailwindCSS together.
"devDependencies": {
"#tailwindcss/forms": "^0.3.1",
"#tailwindcss/typography": "^0.4.0",
"alpinejs": "^2.7.3",
"axios": "^0.21",
"bootstrap": "^4.6.0",
"jquery": "^3.6",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"popper.js": "^1.16.1",
"postcss": "^8.1.14",
"postcss-import": "^14.0.1",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.11",
"sass-loader": "^11.0.1",
"tailwindcss": "^2.0.1",
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.12"
}
I installed Bootstrap using php artisan ui boostrap.
Is there any standard way to remove bootstrap so that I can use only TailwindCSS in my project?
bootsrtap only adds javascript and css files. So first remove the libraries bootsratp,jquery and popper.js. To remove bootsrtap run command:
npm uninstall bootstrap
then in resources/js/bootstrap.js remove:
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
in resources/sass/app.scss remove:
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
you can also delete file resources/sass/_variables.scss. Now run npm run dev/production.
you can also delete laravel/ui views if you've published them.
By doing these steps your laravel package will not depend on bootstrap, unless bootstrap is added by cdn somewhere.
Now you can add any other scaffolding you wish.
tried to show component in my blade but it still not working.i used laravel 7
there is my vue
<template>
<h3>Option Values</h3>
</template>
<script>
export default {
name: "attribute-values",
props: ['attributeid'],
}
</script>
there is how i call it in my view
<div class="tab-pane" id="values">
<attribute-values :attributeid="{{ $attribute->id }}"></attribute-values>
</div>
i import it in js file
Vue.component('attribute-values', require('./components/AttributeValues.vue').default);
there is my package.json file
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^7.0",
"jquery": "^3.2",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"vue-swal": "^0.1.0",
"vue-js-modal": "^1.3.26"
}
what should i do .thank you in advance.
i run npm run dev and npm run watch many times. my file js is generated in public folder so there is no problem. but component still not showed up.
i solved it. all what i did is i separate div id=app from my content.because tags don't match with vue.and i add vue.use(component) like below in my js file:
import AttributeValues from './components/AttributeValues.vue'
Vue.use(AttributeValues);
Vue.component('attribute-values', require('./components/AttributeValues.vue').default, {
name: 'attribute-values'
});
hope that it solve someone's problem.
I had to merge 2 projects in one. One had Vuetify, and the original had Bulma for stylisation.
When I manage to make vuetify work, bulma got lost in scss apparently (before bulma was working). I try to change the Webpack, sass Loaders.
Bellow my package.json
"dependencies": {
"bulma": "^0.7.5",
"core-js": "^3.6.4",
"vue": "^2.6.11",
"vue-router": "^3.1.5",
"vuetify": "^2.2.22",
"vuex": "^3.1.2"
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^2.26.0",
"#typescript-eslint/parser": "^2.26.0",
"#vue/cli-plugin-babel": "~4.3.0",
"#vue/cli-plugin-eslint": "~4.3.0",
"#vue/cli-plugin-router": "~4.3.0",
"#vue/cli-plugin-typescript": "~4.3.0",
"#vue/cli-plugin-vuex": "~4.3.0",
"#vue/cli-service": "~4.3.0",
"#vue/eslint-config-airbnb": "^5.0.2",
"#vue/eslint-config-typescript": "^5.0.2",
"fibers": "^4.0.2",
"node-sass": "^4.13.1",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"typescript": "~3.8.3",
"vue-cli-plugin-pug": "^1.0.7",
"vue-cli-plugin-vuetify": "~2.0.5",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0",
"webpack": "^4.42.1",
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"style-loader": "^0.21.0",
"webpack-cli": "^3.0.8"
I tried other solutions here in stackoverflow, but didn't find one for 2 scss libraries and not sure if is possible.
main.scss
// If imported the css like bellow, it works, but then, I can not edit.
#import '~bulma/css/bulma.css';
// If imported like bellow I got the error.
#import '~bulma/bulma';
Error during compiling:
ERROR Failed to compile with 1 errors 5:14:57 PM
error in ./src/assets/main.scss
Module build failed (from ./node_modules/sass-loade
r/dist/cjs.js):
SassError: $color: ("base": #ff9800, "lighten-5": #
fff3e0, "lighten-4": #ffe0b2, "lighten-3": #ffcc80,
"lighten-2": #ffb74d, "lighten-1": #ffa726, "darke
n-1": #fb8c00, "darken-2": #f57c00, "darken-3": #ef
6c00, "darken-4": #e65100, "accent-1": #ffd180, "ac
cent-2": #ffab40, "accent-3": #ff9100, "accent-4":
#ff6d00) is not a color.
╷
46 │ $color-rgb: ('red': red($color),'green': gre
en($color),'blue': blue($color))
│ ^^^^^^^^^^^
╵
node_modules/bulma/sass/utilities/functions.sass
46:23 colorLuminance()
node_modules/bulma/sass/utilities/functions.sass
59:8 findColorInvert()
node_modules/bulma/sass/utilities/derived-variabl
es.sass 13:17 #import
node_modules/bulma/sass/utilities/_all.sass 5:9
#import
node_modules/bulma/bulma.sass 3:9
#import
/Users/fabiopaitra/Github/voucard-firebase/src/as
sets/main.scss 7:9
root stylesheet
# ./src/assets/main.scss 4:14-254 14:3-18:5 15:22-
262
# ./src/main.ts
# multi (webpack)-dev-server/client?http://192.168
.0.95:8080/sockjs-node (webpack)/hot/dev-server.js
./src/main.ts
What could I've been doing wrong?
According to the Bulma docs you have to import the scss entry point the following way:
#charset "utf-8";
#import "../node_modules/bulma/bulma.sass";
I have a project built with Laravel and Vue.JS (Using Bootstrap-Vue also). Everything works as it should on all browsers including Edge. But as you guessed it, not in IE11.
I have tried various configurations of using babel/polyfills.
In my webpack.mix.js I have the following code:
let mix = require('laravel-mix');
require('laravel-mix-polyfill');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.polyfill({
enabled: true,
useBuiltIns: "entry",
targets: { "firefox": "50", "ie": 11 }
});
I have the following dependencies in my package.json file:
"devDependencies": {
"#babel/polyfill": "^7.8.3",
"axios": "^0.18.1",
"bootstrap": "^4.3.1",
"cross-env": "^5.1",
"laravel-mix": "^4.0.7",
"laravel-mix-polyfill": "^1.1.1",
"lodash": "^4.17.5",
"mutationobserver-shim": "^0.3.3",
"node-sass": "^4.13.1",
"popper.js": "^1.12",
"portal-vue": "^2.1.4",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"#chenfengyuan/vue-qrcode": "^1.0.1",
"bootstrap-vue": "^2.2.0",
"current-device": "^0.9.1",
"intersection-observer": "^0.7.0",
"lottie-vuejs": "0.3.6",
"moment": "^2.24.0",
"v-mask": "^2.0.2",
"vue-autosuggest": "1.8.3",
"vue-js-toggle-button": "^1.3.3",
"vue-recaptcha": "^1.2.0",
"vue-social-sharing": "^2.4.7",
"vue2-flip-countdown": "^0.9.3",
"vuelidate": "^0.7.4"
}
And my app.js file has this at the top as recommended by Bootstrap-Vue documentation:
import '#babel/polyfill'
import 'intersection-observer' // Optional
I have also tried adding the script tag from polyfill.io in the head section of my website.
All result in a blank screen with a SCRIPT1002 Syntax Error and a SCRIPT5007 Object expected error. I'm not sure where I am going wrong, and I really need to get this to work for IE11 unfortunately. None of my Vue components are self-closing in the blade files as answered in a similar question here. And I'm not using Vue CLI.
So I decided to remove all components and plugins, to see if Vue and Bootstrap-Vue worked on their own in IE11. It worked fine and I was receiving the usual Vue dev message in the console.
I then added in each module one by one until the website no longer rendered in IE11. This only happened when lottie-vuejs was enabled, and upon inspecting the console a syntax error is shown (expecting a '}''.
So the reason my project was not working was due to this plugin.