Laravel home(~) SCSS paths not resolving correctly - php

Question

Ive tried a number of solutions and have not found anything that works.
My base directory for all files is localhost/manpower
I put this in my webpack...
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| 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/assets/js/app.js', 'public/assets/js')
.sass('resources/assets/sass/app.scss', 'public/assets/css')
.sass('resources/assets/sass/header.scss', 'public/assets/css')
.version();
When I use the ~ for the home, the processing of the CSS just removes the ~
mix.setPublicPath('manpower/public');
Just creates a directory under the existing file structure and puts the files in that. Unfortunately this popular solution does not change the output of the final CSS.
No mater what I try, I can't get it to add 'manpower' to the URL's I put in the SCCS!

Answer 1

Posting my config to help you, I think that you forgot to define the alias, I have my config in two files to help the IDE (PHPStorm) recognize the ~
(solution from this answer https://stackoverflow.com/a/50159420/5458355)
// webpack.config.js
const path = require('path')
const webpack = require('webpack')
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
module.exports = {
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'~': path.resolve(__dirname, './resources/assets/js')
}
},
output: {
path: process.env.MIX_APP_URL, <--- var from .env
publicPath: '/Socse.GST/public/',
chunkFilename: 'dist/js/chunk.[name].js'
}
}
// webpack.mix.js
const path = require('path')
const mix = require('laravel-mix')
const webpack = require('webpack')
mix
.js('resources/assets/js/app.js', 'public/dist/js')
.sass('resources/assets/sass/app.scss', 'public/dist/css')
.styles([
'resources/assets/sass/fa/css/fontawesome-all.css',
'public/css/awesome-bootstrap-checkbox.css',
'public/css/inspinia.css',
'node_modules/vue-multiselect/dist/vue-multiselect.min.css'
], 'public/dist/css/all.css')
.sourceMaps()
//.disableNotifications()
if (mix.inProduction()) {
mix.version()
}
mix.webpackConfig({
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
],
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'~': path.join(__dirname, './resources/assets/js')
}
},
output: {
chunkFilename: 'dist/js/chunk.[name].[chunkhash].js',
path: process.env.MIX_APP_URL,
publicPath: '/wms/public/'
}
})

Answer 2

New version
const path = require('path');
const mix = require('laravel-mix');
const webpack = require('webpack');
mix
.js('resources/assets/js/app.js', 'assets/js')
.sass('resources/assets/sass/app.scss', 'assets/css')
.sass('resources/assets/sass/header.scss', 'assets/css')
.version()
.options({
processCssUrls: true
});
if (mix.inProduction()) {
mix.version()
}
mix.webpackConfig({
resolve: {
alias: {
'~': path.join(__dirname, './resources/')
}
},
output: {
chunkFilename: 'dist/js/chunk.[name].[chunkhash].js',
path: process.env.MIX_APP_URL,
publicPath: '/public/'
}
})

Answer 3

Im pretty sure this is a problem with the webpack.config.js
Ive been able to resolve some of the issues but the error remains.
/**
* As our first step, we'll pull in the user's webpack.mix.js
* file. Based on what the user requests in that file,
* a generic config object will be constructed for us.
*/
let mix = require('../index');
let ComponentFactory = require('../components/ComponentFactory');
new ComponentFactory().installAll();
require(Mix.paths.mix());
/**
* Just in case the user needs to hook into this point
* in the build process, we'll make an announcement.
*/
Mix.dispatch('init', Mix);
/**
* Now that we know which build tasks are required by the
* user, we can dynamically create a configuration object
* for Webpack. And that's all there is to it. Simple!
*/
let WebpackConfig = require('../src/builder/WebpackConfig');
//module.exports = new WebpackConfig().build();
const path = require('path')
const webpack = require('webpack')
module.exports = {
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'~': path.resolve(__dirname, './resources/assets/js')
},
},
output: {
path: process.env.MIX_APP_URL,
publicPath: '/manpower/public/',
chunkFilename: 'dist/js/chunk.[name].js'
}
}

Answer 4

You may want to provide your version of mix and sass-loader (there is a bug in old sass-loader that does not work with tilde). Also, please do not post comment as update, it causes confusions in your question.
Generally, avoid using tilde; instead, use relative path. You want to look at this answer: https://stackoverflow.com/a/33972875/2188545
Even without all the confusing comments, tilde is confusing when use in url, especially when your browser path manpower/ is not a simple root / path. Don't get me wrong, tilde is fine with css import as it is generally resolve during compilation; just more confusing when use in url. Also, please use quote around your css url.