Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Allow "layer" and "issuerLayer" rule properties#1809

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Open
stevethedev wants to merge1 commit intovuejs:master
base:master
Choose a base branch
Loading
fromstevethedev:patch-1

Conversation

stevethedev
Copy link

The "layer" and "issuerLayer" rules are useful experimental properties that are currently stripped out by the Vue Loader plugin. This change fixes that issue.

My specific use-case was to load SVG files as Vue components if they are imported into a script, but import them as URLs if I reference them in the CSS. Layers make this trivial:

module.exports = {  experiments: { layers: true },  module: {    rules: [      { test: /\.vue$/, loader: "vue-loader" },      { test: /\.vue$/, resourceQuery: /type=script/, layer: "script" },      { test: /\.[jt]s$/, layer: "script" },      {        test: /\.svg$/i,        oneOf: [          { loader: 'vue-svg-loader', issuerLayer: "script" },          { loader: 'file-loader' },        ],      },    ],  }};

The "layer" and "issuerLayer" rules are useful experimental properties that are currently stripped out by the Vue Loader plugin. This change fixes that issue.My specific use-case was to load SVG files as Vue components if they are imported into a script, but import them as URLs if I reference them in the CSS. Layers make this trivial:```module.exports = {  experiments: { layers: true },  module: {    rules: [      { test: /\.vue$/, loader: "vue-loader" },      { test: /\.vue$/, resourceQuery: /type=script/, layer: "script" },      { test: /\.[jt]s$/, layer: "script" },      {        test: /\.svg$/i,        oneOf: [          { loader: 'vue-svg-loader', issuerLayer: "script" },          { loader: 'file-loader' },        ],      },    ],  }};```
@mrleblanc101
Copy link

mrleblanc101 commentedAug 23, 2021
edited
Loading

Will this work in webpack 4 ? I'm trying to do something similar in Nuxt.
The problem is thatlayer andissueLayer do not exist in webpack 4, only resourceQuery.

config.module.rules.push({    test: /\.svg$/,    resourceQuery: /script/,    use: ['babel-loader',    'vue-svg-loader']});

I couldnt' figure out why it's not working but when I look into the bundle code, there is no?vue&type=script so I think that's why my resourceQuery does nothing.
__webpack_require__(/*! @/assets/svg/placeholder/organismes.svg*/ \"./src/assets/svg/placeholder/organismes.svg\")
should be__webpack_require__(/*! @/assets/svg/placeholder/organismes.svg?vue&type=script*/ \"./src/assets/svg/placeholder/organismes.svg?vue&type=script\") I think for this to work.
I hope this fix will add these attributes back so that resourceQuery will work in Webpack 4

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

2 participants
@stevethedev@mrleblanc101

[8]ページ先頭

©2009-2025 Movatter.jp