Skip to content
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 our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

css-loader doesn't export Webpack's stats when @import is used #755

Closed
tanin47 opened this issue Aug 10, 2018 · 9 comments

Comments

Projects
None yet
2 participants
@tanin47
Copy link

commented Aug 10, 2018

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

The Webpack's stats doesn't seem to contain any data related to @import

What is the expected behavior?

When reading a file from @import, ensure that the imported file path and the path of the file contains @import are written to Webpack's stats (https://webpack.js.org/api/stats/).

I'm still new to Webpack, so I might not understand some stuffs correctly. But I'm quite certain that the css file path isn't in Webpack's stats.

If this is a feature request, what is motivation or use case for changing the behavior?

We would like css-loader to output the file it reads to Webpack's stats. We use this data to track changes in files and their dependencies, so that we can hot-reload code correctly.

@evilebottnawi

This comment has been minimized.

Copy link
Member

commented Aug 10, 2018

@tanin47 It is expected because any css import become js module. Better create this issue inside webpack.

@tanin47

This comment has been minimized.

Copy link
Author

commented Aug 10, 2018

This explains why Webpack's stats contains the content of the css import, for example:

{ id: 17,
  identifier: '/home/tanin/projects/sbt-vuefy/node_modules/css-loader/index.js!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/style-compiler/index.js?{"vue":true,"id":"data-v-f8aaa26e","scoped":true,"hasInlineConfig":false}!/home/tanin/projects/sbt-vuefy/node_modules/sass-loader/lib/loader.js!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/selector.js?type=styles&index=0!/home/tanin/projects/sbt-vuefy/src/test/scala/givers/vuefy/assets/vue/component-a.vue',
  name: '/home/tanin/projects/sbt-vuefy/node_modules/css-loader!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-f8aaa26e","scoped":true,"hasInlineConfig":false}!/home/tanin/projects/sbt-vuefy/node_modules/sass-loader/lib/loader.js!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/selector.js?type=styles&index=0!./vue/component-a.vue',
  index: 2,
  index2: 1,
  size: 224,
  cacheable: true,
  built: true,
  optional: false,
  prefetched: false,
  chunks: [ 0 ],
  assets: [],
  issuer: '/home/tanin/projects/sbt-vuefy/node_modules/vue-style-loader/index.js!/home/tanin/projects/sbt-vuefy/node_modules/css-loader/index.js!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/style-compiler/index.js?{"vue":true,"id":"data-v-f8aaa26e","scoped":true,"hasInlineConfig":false}!/home/tanin/projects/sbt-vuefy/node_modules/sass-loader/lib/loader.js!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/selector.js?type=styles&index=0!/home/tanin/projects/sbt-vuefy/src/test/scala/givers/vuefy/assets/vue/component-a.vue',
  issuerId: 16,
  issuerName: '/home/tanin/projects/sbt-vuefy/node_modules/vue-style-loader!/home/tanin/projects/sbt-vuefy/node_modules/css-loader!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-f8aaa26e","scoped":true,"hasInlineConfig":false}!/home/tanin/projects/sbt-vuefy/node_modules/sass-loader/lib/loader.js!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/selector.js?type=styles&index=0!./vue/component-a.vue',
  profile: undefined,
  failed: false,
  errors: 0,
  warnings: 0,
  reasons:
   [ { moduleId: 16,
       moduleIdentifier: '/home/tanin/projects/sbt-vuefy/node_modules/vue-style-loader/index.js!/home/tanin/projects/sbt-vuefy/node_modules/css-loader/index.js!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/style-compiler/index.js?{"vue":true,"id":"data-v-f8aaa26e","scoped":true,"hasInlineConfig":false}!/home/tanin/projects/sbt-vuefy/node_modules/sass-loader/lib/loader.js!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/selector.js?type=styles&index=0!/home/tanin/projects/sbt-vuefy/src/test/scala/givers/vuefy/assets/vue/component-a.vue',
       module: '/home/tanin/projects/sbt-vuefy/node_modules/vue-style-loader!/home/tanin/projects/sbt-vuefy/node_modules/css-loader!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-f8aaa26e","scoped":true,"hasInlineConfig":false}!/home/tanin/projects/sbt-vuefy/node_modules/sass-loader/lib/loader.js!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/selector.js?type=styles&index=0!./vue/component-a.vue',
       moduleName: '/home/tanin/projects/sbt-vuefy/node_modules/vue-style-loader!/home/tanin/projects/sbt-vuefy/node_modules/css-loader!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-f8aaa26e","scoped":true,"hasInlineConfig":false}!/home/tanin/projects/sbt-vuefy/node_modules/sass-loader/lib/loader.js!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/selector.js?type=styles&index=0!./vue/component-a.vue',
       type: 'cjs require',
       userRequest: '!!../../../../../../../node_modules/css-loader/index.js!../../../../../../../node_modules/vue-loader/lib/style-compiler/index.js?{"vue":true,"id":"data-v-f8aaa26e","scoped":true,"hasInlineConfig":false}!../../../../../../../node_modules/sass-loader/lib/loader.js!../../../../../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./component-a.vue',
       loc: '4:14-396' } ],
  usedExports: true,
  providedExports: null,
  optimizationBailout: [],
  depth: 2,
  source: 'exports = module.exports = require("../../../../../../../node_modules/css-loader/lib/css-base.js")(false);\n// imports\n\n\n// module\nexports.push([module.id, ".beautiful-box[data-v-f8aaa26e]{font-size:16px}", ""]);\n\n// exports\n' }

Notice .beautiful-box, which is the content in the css file.

However, the css file path is nowhere to be found.

Could you point to the code where it converts css import to a js module? It might be helpful to me. I want to try to solve this problem by leaving a trail that contains the css file path.

Also, I'll file an issue in Webpack's project. Thank you @evilebottnawi

@evilebottnawi

This comment has been minimized.

Copy link
Member

commented Oct 30, 2018

@tanin47 Sorry for delay, a lot of work 😞 Problem still exists?

@tanin47

This comment has been minimized.

Copy link
Author

commented Oct 30, 2018

Yes. I wonder if you can guide me on how to solve this problem.

For more context, I'd like to detect CSS dependency. It is essential for hot-reloading code in Playframework. See: GIVESocialMovement/sbt-vuefy#20

@evilebottnawi

This comment has been minimized.

Copy link
Member

commented Oct 30, 2018

@tanin47 Each @import produce require (i.e. it is module). What you expected in stats? And why you need this?

@tanin47

This comment has been minimized.

Copy link
Author

commented Oct 30, 2018

I expect a full path of the CSS file because Playframework would be able to track dependencies and re-compile the files needed.

Currently, as I posted in the earlier comment, the file path is not outputted but the content of the CSS file is.

@evilebottnawi

This comment has been minimized.

Copy link
Member

commented Oct 30, 2018

@tanin47 it is expected because it is module, you need custom loader for this. It is not regular use case. You can use issuer to detect original file name, also you can use postcss-loader.

@tanin47

This comment has been minimized.

Copy link
Author

commented Oct 31, 2018

Thank you for the pointers. I'll let you know if I have more questions.

@evilebottnawi

This comment has been minimized.

Copy link
Member

commented Nov 26, 2018

Feel free to feedback

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.