Skip to content

fix: fix dev mode css files being processed by asset/resource#42283

Closed
xiaoxiaojx wants to merge 1 commit intovercel:canaryfrom
xiaoxiaojx:fix/css_asset_resource
Closed

fix: fix dev mode css files being processed by asset/resource#42283
xiaoxiaojx wants to merge 1 commit intovercel:canaryfrom
xiaoxiaojx:fix/css_asset_resource

Conversation

@xiaoxiaojx
Copy link

@xiaoxiaojx xiaoxiaojx commented Nov 1, 2022

Bug

I found a bug in the development environment,As shown in the picture below, the content in the style tag is a url string,not css content.
image

because styles/globals.css will be processed by stlye-loader first,At this point, the style-loader will require again

// https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack/loaders/next-style-loader/index.js#L259

var content = require(${stringifyRequest(this, `!!${request}`)});

//  var content = require('!!xxx/css-loader/src/index.js??xxx/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[6].use[2]!./globals.css')

The issuer of require in style-loader is styles/globals.css, So it will be processed by asset/resource

// https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack/config/blocks/css/index.ts#L607

oneOf: [
          markRemovable({
            // This should only be applied to CSS files
            issuer: regexLikeCss,
            // Exclude extensions that webpack handles by default
            exclude: [
              /\.(js|mjs|jsx|ts|tsx)$/,
              /\.html$/,
              /\.json$/,
              /\.webpack\[[^\]]+\]$/,
            ],
            // `asset/resource` always emits a URL reference, where `asset`
            // might inline the asset as a data URI
            type: 'asset/resource',
          }),
        ],

I know more about Webpack Rule.oneOf now.
!!xxx/css-loader/src/index.js??xxx/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[6].use[2]!./globals.css will not pick any loader, but asset/resource can be merged in, not sure if it's intentional or not
image

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants