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

Posted 2023-02-22

【中文标题】Laravel home(~) SCSS 路径无法正确解析

【英文标题】：Laravel home(~) SCSS paths not resolving correctly

【发布时间】：2019-05-11 16:16:56

【问题描述】：

我尝试了许多解决方案，但没有找到任何可行的方法。

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

我把它放在我的 webpack 中... 让 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();

当我使用 ~ 作为 home 时，CSS 的处理只是删除 ~

mix.setPublicPath('manpower/public');

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

无论我尝试什么，我都无法将“人力”添加到我放入 SCCS 的 URL 中！

【参考方案1】：

发布我的配置以帮助您，我认为您忘记定义别名，我将我的配置放在两个文件中以帮助 IDE（phpStorm）识别〜 （来自这个答案https://***.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/'
  
)

【讨论】：

非常感谢，但这并不能解决我面临的问题。我在这台机器上重新安装了 laravel。将 SCCS 添加到路径中。将 End 值更改为新安装。并运行“npm run dev”。我仍然将“/”作为根路径......我所做的一切都会影响计算机查看的路径，而不是分配给最终 css 的路径。我目前花了最后 4 个小时研究这个。我能找到的唯一解决方案并不能解决问题。我什么都试过了。

解析对象中有别名吗？你能完全发布你的 webpack.mix 和你的 scss 文件吗？

【参考方案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/'
        
)

【参考方案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'

【参考方案4】：

您可能需要提供您的 mix 和 sass-loader 版本（旧的 sass-loader 中存在一个错误，该错误不适用于波浪号）。另外，请不要将评论作为更新发布，这会导致您的问题混淆。

一般来说，避免使用波浪号；相反，使用相对路径。你想看看这个答案：https://***.com/a/33972875/2188545

即使没有所有令人困惑的 cmets，波浪号在 url 中使用时也会令人困惑，尤其是当您的浏览器路径 manpower/ 不是简单的根 / 路径时。不要误会我的意思，波浪号适用于 css 导入，因为它通常在编译期间解决；在url 中使用时更加混乱。另外，请在您的 css url 周围使用引号。

【讨论】：

我很感激。但我无法让这条路工作。据我所知，这是一个 Windows 问题。据我所知，laravel 讨厌 Windows 10。这有点疯狂。我将“setPublicPath”设置为“manpower/public”并将资产放入 c:/wamp64/www/ 我看到其他人有这个问题...github.com/JeffreyWay/laravel-mix/issues/960 据我所知，他们说“path.normalize “为他们工作。我尝试的一切都不起作用。我尝试了 publicPath、.setPublicPath 和许多其他选项。据我所知，工作中有一些疯狂的逻辑。

我添加了一个路径，“manpower”，我得到 c:\wamp64\www\manpower\manpower\ 我删除路径，我得到 c:\wamp64\www

我的输出是 /images

我已经将它输出到正确的目录。但我从来没有把它作为家输出/人力。据我所知，这在 Windows 10 上是不可用的，应该这样标记。

我花了 10 个小时试图让它输出。我放弃 Windows 并转向 linux 机器。我只是无法让它在 Windows 上运行。不知道 laravel 只是 linux。 :(