I'm following Laravel documentation and have this file structure:
In app.scss I have:
#import 'style12';
.real-demo{
}
and in style12.scss some css code which i try to import.
When I run npm run dev I get following error:
Module build failed: Error: "../../resources/assets/sass/style12.scss" is not in the SourceMap.
at BasicSourceMapConsumer.SourceMapConsumer_sourceContentFor [as sourceContentFor] (C:\Users\mixei\Desktop\Projects\westcredit\node_modules\source-map\lib\source-map-consumer.js:704:13)
at SourceMapGenerator.<anonymous> (C:\Users\mixei\Desktop\Projects\westcredit\node_modules\source-map\lib\source-map-generator.js:235:40)
at Array.forEach (<anonymous>)
at SourceMapGenerator_applySourceMap [as applySourceMap] (C:\Users\mixei\Desktop\Projects\westcredit\node_modules\source-map\lib\source-map-generator.js:234:32)
at MapGenerator.applyPrevMaps (C:\Users\mixei\Desktop\Projects\westcredit\node_modules\postcss\lib\map-generator.js:146:22)
at MapGenerator.generateMap (C:\Users\mixei\Desktop\Projects\westcredit\node_modules\postcss\lib\map-generator.js:194:46)
at MapGenerator.generate (C:\Users\mixei\Desktop\Projects\westcredit\node_modules\postcss\lib\map-generator.js:297:25)
at LazyResult.stringify (C:\Users\mixei\Desktop\Projects\westcredit\node_modules\postcss\lib\lazy-result.js:294:24)
at C:\Users\mixei\Desktop\Projects\westcredit\node_modules\postcss\lib\lazy-result.js:231:27
Also here is my webpack.mix.js:
const { mix } = require('laravel-mix');
mix.options({
processCssUrls: false
});
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Any help will be appreciated, thanks!
Related
I get the error Can't resolve '../api' when running npm run dev. I wrote a script to retrieve some data via an API call. This script works well when I put it in the vendor directory (vendor/badaso/core/src/js/api/modules). It is called by a store in resources/js/badaso/stores with
import api from "../../../../vendor/badaso/core/src/resources/js/api";
When I move this script to resources/js/badaso/api/modules and call it by...
import "../api"
Running "npm run dev", I get the following error.
Can't resolve '../api`
webpack.mix.js
const mix = require('laravel-mix');
//mix.js('resources/js/app.js', 'public/js') // original
mix.js('resources/js/*.js', 'public/js') // try -> same error
.postCss('resources/css/app.css', 'public/css', [
//
]);
// Can't resolve '../api'
// Badaso
mix.js("vendor/badaso/core/src/resources/js/app.js",
"public/js/badaso.js")
.sass("vendor/badaso/core/src/resources/js/assets/scss/style.scss",
"public/css/badaso.css")
.vue()`
I try this in webpack.mix.js
//mix.js('resources/js/app.js', 'public/js') // original
mix.js('resources/js/*.js', 'public/js') // try -> same error``
Solution:
Thanks to both Karl & Ali I can now use alias' without having to create a seperate webpack.config.js file. Just add the alias to webpack.mix.js like so:
const mix = require('laravel-mix');
const path = require('path');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css')
.alias({'#': 'resources/'})
.webpackConfig({resolve: {alias: {'#': path.resolve('resources/')}}})
.vue();
Question:
From this post, I learned that you could configure your # path in webpack.mix.js to represent the assets/resources folder in a vue/laravel project so that you can use the # symbol in your paths.
mix.webpackConfig({
resolve: {
alias: {
'#resources': path.resolve('resources'),
},
},
})
Unfortunately, this leads to the following error.
yarn run v1.22.17 $ mix watch [webpack-cli] ReferenceError: path is
not defined
at Object. (/Users/artur/PhpstormProjects/safa-ameedee.com/webpack.mix.js:16:21)
at Module._compile (node:internal/modules/cjs/loader:1097:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10)
at Module.load (node:internal/modules/cjs/loader:975:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:999:19)
at require (node:internal/modules/cjs/helpers:102:18)
at module.exports (/Users/artur/PhpstormProjects/safa-ameedee.com/node_modules/laravel-mix/setup/webpack.config.js:11:5)
at loadConfigByPath (/Users/artur/PhpstormProjects/safa-ameedee.com/node_modules/webpack-cli/lib/webpack-cli.js:1747:27)
at async Promise.all (index 0) error Command failed with exit code 2.
I've tried different variations (#assets etc.), but I always get the same error. So what am I doing wrong?
You're not adding the explicit require of the path package, but you should do so. Make sure you add the following to the top of your webpack.config.js file.
const path = require('path');
Also, you may need to add __dirname.
const path = require('path');
mix.webpackConfig({
resolve: {
alias: {
'#resources': path.resolve(__dirname, 'resources/')
}
}
});
In your webpack.mix.js:
...
.alias({'#': 'resources/js'})
...
Import Aliases - Laracasts
I built a single page application (SPA) using Laravel 8 + Vue.js + InertiaJs. Everything is working fine in the development environment, but when I compile assets for production, it shows me a blank page, and there is no error in the console. All assets are loading correctly with a 200 code, and everything seems to be OK, but the Vue app is not mounting!
webpack.mix.js
const mix = require('laravel-mix');
require('laravel-mix-workbox');
mix.webpackConfig({
output: {
filename: '[name].js',
chunkFilename: 'js/[name].js',
}
}).js('resources/js/app.js', 'public/js')
.extract(['vue'])
.version();
Image1
Image2
Image3
try using the inertiajs webpack.mix.js provided by the pingCRM github:
const path = require('path')
const mix = require('laravel-mix')
const cssImport = require('postcss-import')
const cssNesting = require('postcss-nesting')
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix
.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
// prettier-ignore
cssImport(),
cssNesting(),
require('tailwindcss'),
])
.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
'#': path.resolve('resources/js'),
},
},
})
.version()
.sourceMaps()
note you may have to follow the instructions for setting up tailwindcss which can be found here, only do this if you plan to use it otherwise remove the require('tailwindcss'), from the webpack file
you also may need to npm install --save-dev postcss-import and npm install --save-dev postcss-nesting the --save-dev flag will add it to your package.json file for future reference
I am trying to load Bootstrap Vue into a Laravel 5.6 project
The official docs say to modify your webpack.config.js file like:
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
Webpack docs: https://webpack.js.org/guides/asset-management/#loading-css
I don't have a webpack.config.js file so I tried loading the CSS in with Laravel mix
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.styles('node_modules/bootstrap-vue/dist/bootstrap-vue.css', 'public/css');
This give me an error
mix.combine() requires a full output file path as the second argument.
and I'm not convinced it's the right way to do it.
What is the proper way to add bootstrap-vue into a new Laravel 5.6 project?
Import the Bootstrap Vue styles in your app.scss file directly, instead of through mix:
// app.scss
#import "~bootstrap/dist/css/bootstrap.css";
#import "~bootstrap-vue/dist/bootstrap-vue.css";
// webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
Laravel Mix already has the CSS loader configured so you don't need to set up a separate webpack.config.js file.
This is my code:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'resources/assets/css')
.styles([
'resources/assets/css/animate.min.css'
],'resources/assets/css/style.css')
.combine(['resources/assets/css/style.css','resources/assets/css/app.css'], 'public/css/app.css');
and results:
\js\app.js 928 kB
\resources\assets\css\app.css 185 kB
\resources\assets\css\style.css 52.8 kB
\css\all.css 52.8 kB
You can see,It can merge app.css with style.css. output is only style.css as all.css
what is wrong?