Laravel home (~) пути SCSS не разрешаются правильно

Question

Я попробовал несколько решений и не нашел ничего, что работает.

Моя базовая директория для всех файлов - localhost / manpower

Я положил это в свой веб-пакет ... давай микс= 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();

Когда я использую ~ для дома, обработка CSS просто удаляет ~

mix.setPublicPath ('manpower /public ');

Просто создает каталог под существующей файловой структурой и помещает файлы в него.К сожалению, это популярное решение не меняет вывод окончательного CSS.

Не важно, что я пытаюсь, я не могу заставить его добавить «рабочую силу» к URL-адресам, которые я вставил в SCCS!

Answer 1

Вы можете указать свою версию mix и sass-loader (в старом sass-loader есть ошибка, которая не работает с тильдой).Также, пожалуйста, не оставляйте комментарий как обновление, это вызывает путаницу в вашем вопросе.

Как правило, избегайте использования тильды;вместо этого используйте относительный путь.Вы хотите посмотреть на этот ответ: https://stackoverflow.com/a/33972875/2188545

Даже без всех запутанных комментариев тильда сбивает с толку при использовании в URL, особенно когда путь вашего браузера manpower/ не является простым путем root /.Не поймите меня неправильно, тильда в порядке с CSS-импортом, так как она обычно решается во время компиляции;просто более запутанно при использовании в url.Также, пожалуйста, используйте цитату вокруг вашего CSS-URL.

Answer 2

Новая версия

    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

Я почти уверен, что это проблема webpack.config.js

Мне удалось решить некоторые проблемы, но ошибка остается.

/**
 * 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

Размещая мою конфигурацию, чтобы помочь вам, я думаю, что вы забыли определить псевдоним, у меня есть моя конфигурация в двух файлах, чтобы помочь IDE (PHPStorm) распознать ~ (решение из этого ответа 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/'
  }
})