Laravel home(〜)SCSS路径无法正确解析

我尝试了很多解决方案,但没有发现任何有效的方法。</ p>

我所有文件的基本目录是localhost / manpower </ p>

我把它放在我的webpack中...
让mix = require('laravel-mix'); </ p> \ n

  / * 
| ------------------------------------ --------------------------------------
| 混合资产管理
| -------------------------------------------- ------------------------------
|
| Mix提供了一个干净,流畅的API,用于定义一些Webpack构建步骤
| 为您的Laravel应用程序。 默认情况下,我们正在编译Sass
| 应用程序的文件以及捆绑所有JS文件。
|
  • /
    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 ();
    </ code> </ pre>

    当我将〜用于家庭时,CSS的处理只会删除〜</ p>

    混合 .setPublicPath('manpower / public'); </ p>

    只需在现有文件结构下创建一个目录并将文件放入其中。 不幸的是,这种流行的解决方案不会改变最终CSS的输出。 </ p>

    无论我尝试什么,我都无法将“人力”添加到我放入SCCS的URL中!</ p>
    </ div>

展开原文

原文

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!

4个回答

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/'
  }
})
douyan6548
douyan6548 添加了回复@Walter,非常感谢
一年多之前 回复
dtf1111
dtf1111 你在解析对象中有别名吗? 你可以完全发布你的webpack.mix和你的scss文件吗?
一年多之前 回复
duanlv2788
duanlv2788 非常感谢,但这并没有解决我面临的问题。 我在这台机器上安装了全新的laravel。 将SCCS添加到路径中。 将End值更改为新安装。 并运行'npm run dev'。 我仍然以“/”作为根路径......我所做的一切都影响了计算机所看到的路径,而不是分配给最终css的路径。 我目前花了4个小时研究这个。 我能找到的唯一解决方案并没有解决问题。 我尝试了一切。
一年多之前 回复



新版本</ p>

  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({
解决:{
别名:{
'〜':path.join(__ dirname,'。/ resources /')
}
},
输出:{
chunkFilename:'dist / js / chunk。 [name]。[chunkhash] .js',
path:process.env.MIX_APP_URL,
publicPath:'/ public /'
}
})
</ code> </ pre>
< / DIV>

展开原文

原文

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/'
        }
})

dongxie559554
dongxie559554 .env文件有MIX_APP_URL = / manpower /
一年多之前 回复



我很确定这是webpack.config.js的一个问题</ p>

我已经能够 解决一些问题,但错误仍然存​​在。</ p>

  / ** 
*作为我们的第一步,我们将引入用户的webpack.mix.js
*档案。 根据用户在该文件中的请求,
*将为我们构建一个通用配置对象。
  • / let mix = require('../ index');

let ComponentFactory = require(' ../components/ComponentFactory');
nnnew ComponentFactory()。installAll();

require(Mix.paths.mix());

/ **
*以防用户 我们需要在构建过程中勾选到这一点,我们将发布公告。

  • /

Mix.dispatch('init',Mix);

/ **
*现在 我们知道
*用户需要哪些构建任务,我们可以为Webpack动态创建配置对象
*。 这就是它的全部内容。 简单!

  • /

let WebpackConfig = require('../ src / builder / WebpackConfig');

// module.exports = new WebpackConfig()。build();

\ n
const path = require('path')
const webpack = require('webpack')

module.exports = {

resolve:{
extensions:['。js','。json' ,'。vue'],
别名:{
'〜':path.resolve(__ dirname,'。/ resources / assets / js')
},
},
输出:{
path :process.env.MIX_APP_URL,
publicPath:'/ manpower / public /',
chunkFilename:'dist / js / chunk。[name] .js'
}
}
</ code> </ pre>
</ div>

展开原文

原文

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'
}
}



您可能想要提供您的mix和sass-loader版本(旧的sass-loader中存在一个与之无关的错误) 波浪号)。 此外,请不要发表评论作为更新,它会导致您的问题混淆。</ p>

一般情况下,避免使用代字号; 相反,使用相对路径。 您想看看这个答案: https://stackoverflow.com/a/33972875/2188545 </ p> \ n

即使没有所有令人困惑的注释,在url中使用时,代字号也会令人困惑,尤其是当您的浏览器路径 manpower / </ code>不是简单的根 / </ code>路径时。 不要误解我的意思,使用css import可以解决问题,因为它在编译时通常会解决; 在 url </ code>中使用时更加困惑。 另外,请在您的css网址周围使用引号。</ p>
</ div>

展开原文

原文

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.

drzb7969753
drzb7969753 我花了10个小时试图让它输出。 我放弃了Windows并转向Linux机器。 我无法让它在Windows上运行。 不知道laravel只是linux。 :(
一年多之前 回复
douhan1860
douhan1860 我得到它输出到正确的目录。 但我从来没有把它作为家庭输出/人力。 据我所知,这对于Windows 10来说无法使用,应该标记为这样。
一年多之前 回复
dp7311
dp7311 我的输出结果是/ images
一年多之前 回复
duanbinian2243
duanbinian2243 我添加一个路径,“manpower”,我得到c:\ wamp64 \ www \ manpower \ manpower \我删除路径,我得到c:\ wamp64 \ www
一年多之前 回复
doupu0619
doupu0619 我很感激。 但我无法让这条路走下去。 据我所知,这是一个Windows问题。 我可以说,laravel讨厌窗户10.这有点疯狂。 我将“setPublicPath”设置为'manpower / public',资产放入c:/ wamp64 / www /我看到其他人有这个问题... github.com/JeffreyWay/laravel-mix/issues/960至于 我可以说,他们说“path.normalize”适合他们。 我尝试的一切都行不通。 我已经尝试了选项publicPath,.setPublicPath和许多其他的东西。 从我可以讲述一些疯狂的逻辑工作。
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐