fix: css-loader 1.0 removed alias

[clarkdo]

Fixes issues with @/ for plugins and more.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

Related to #3723
Because css-loader has removed options.alias and is using loader-utils for url() now.
So this is a breaking change for <url>, users need to prefix ~ when they want to use alias:

Now: please use url(~assets)(recommend), url(~@/assets) or url(~~/assets)
Do not use: url(~/assets)

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly. (PR: #)
• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests passed.

[codecov-io]

Codecov Report

Merging #3741 into dev will not change coverage.
The diff coverage is 100%.

@@           Coverage Diff           @@
##              dev    #3741   +/-   ##
=======================================
  Coverage   97.64%   97.64%           
=======================================
  Files          18       18           
  Lines        1231     1231           
  Branches      335      335           
=======================================
  Hits         1202     1202           
  Misses         28       28           
  Partials        1        1

Impacted Files	Coverage Δ
lib/builder/webpack/utils/style-loader.js	100% <ø> (ø)	⬆️
lib/builder/webpack/base.js	98.43% <100%> (+0.02%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 65432e6...788546a. Read the comment docs.

[husayt]

This breaks vuetify in a la-carte-mode.
https://vuetifyjs.com/en/guides/a-la-carte

Error msg is : Invalid or unexpected token

it is complaining at this line in latest 1.2.4 version of

require('../../../src/stylus/components/_app.styl');

in this file
...\node_modules\vuetify\es5\components\VApp\VApp.js

[clarkdo]

Could you provide a repo ? @husayt

[husayt]

Hi @clarkdo
here is repo with simple demo.
https://github.com/husayt/nuxt2-vuetify

latest commit works with "nuxt-edge": "2.0.0-25607354.1e02195",
the commit before then with "nuxt": "2.0.0" is broken.

Thanks

[husayt]

@clarkdo did the example I provide make sense, or do you need more info?

[clarkdo]

@husayt Sorry about that I have some personal stuff recently, I’ll look into it immediately when available.

[aldarund]

@husayt @clarkdo use transpile instead of config.externals & nodeExternals and it will work. I have same vuetify a la carte setup and it work fine.
PS in vuetify 1.3 it wont be needed due to auto a la carte

[husayt]

@aldarund thanks for a tip.

Here is a working config from me:

 build: {
    transpile: [/^vuetify/],
    babel: {
      plugins: [
        [
          "transform-imports",
          {
            vuetify: {
              transform: "vuetify/es5/components/${member}",
              preventFullImport: true
            }
          }
        ]
      ]
    },

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.