Laravel-mix: 6.0.0-beta.14 Vue SFC scss @import trying to resolve url() even tho processCssUrls is set to false

Created on 25 Nov 2020 · 3Comments · Source: JeffreyWay/laravel-mix

Laravel Mix Version: 6.0.0-beta.14
Node Version (node -v): v15.2.0
NPM Version (npm -v): 7.0.8
OS: Ubuntu 18.04 on Windows 10

Description:

in my webpack.mix.js i've set processCssUrls: false however when i run mix.js(/**/).vue() one of my Single File Vue Components (SFC) which has a scss @import statement, imports a stylesheet that has a url() background-image and a font src:url() definition. Compilation fails with "Can't resolve" errors.

Is there some special extra config option i need to send into Mix or Webpack to get vue-loader to not processCssUrls when compiling styles?

Steps To Reproduce:

[email protected]
[email protected]
vue-loader15 (i assume)
[email protected]

 ERROR  Failed to compile with 2 errors                                                                                                                                                                  4:01:01 PM

 error  in ./components/Component.vue?vue&type=style&index=0&id=4b38ac70&lang=scss&scoped=true&

Syntax Error: Error: Can't resolve '/fonts/vjs.eot' in 'components'


 error  in ./components/Component.vue?vue&type=style&index=0&id=860b7dd0&lang=scss&scoped=true&

Syntax Error: Error: Can't resolve '/images/subnav_mobile.jpg' in 'components'



npm ERR! code 1
npm ERR! path /root/app
npm ERR! command failed
npm ERR! command sh -c NODE_ENV=development webpack --progress --config=node_modules/laravel-mix/setup/webpack.config.js "--env" "js-only"

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-11-25T00_01_01_436Z-debug.log

UPDATE i tried adding extractVueStyles: true but that didn't seem to make a difference

UPDATE 2

if i add this to `webpackConfig.module.rules[]` it compiles:
{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            scss: 'style-loader!css-loader?url=false!sass-loader'
          }
        }
      }

UPDATE THE THIRD ^ that had bad side-effects elsewhere, so now i'm trying the slightly _more_ generalized:

mix.override((webpackConfig)=>{
  // console.log(webpackConfig.module.rules);
  webpackConfig.module.rules = _.map(webpackConfig.module.rules,function(rule){
    // console.log(rule);
    if(rule.test == "/\\.scss$/"){
      rule.oneOf = _.map(rule.oneOf, function(oneOf){
        oneOf.use = _.map(oneOf.use, function(use){
          if(use.loader === "css-loader"){
            use.options.url = false;
          }
          return use;
        })
        return oneOf
      })
    }
    return rule
  })
})

but that still feels gross, and like something mix should provide an easy escape hatch for

Source

jakedowns

👍3

All 3 comments

Yes, I have the same issue here.

  .sass('src/sass/styles.scss', 'public/css').options({
    processCssUrls: false,
    postCss: [
      tailwindcss('./tailwind.config.js'),
      require('autoprefixer')
    ]
  })

After updating to tailwind 2 with mix v6-beta.14 the such lines:

src: url('../fonts/open-sans-v17-latin/open-sans-v17-latin-300.eot')

will be processed even if processCssUrls is set to false.