Use absolute path

vercel · Jan 3, 2020 · ae7a588 · ae7a588
1 parent 130be5f
commit ae7a588
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 8 deletions.
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -869,6 +869,7 @@ export default async function getBaseWebpackConfig(
     isServer,
     hasSupportCss: !!config.experimental.css,
     hasExperimentalData: !!config.experimental.ampBindInitData,
+    assetPrefix: config.assetPrefix || '',
   })
 
   if (typeof config.webpack === 'function') {

diff --git a/packages/next/build/webpack/config/blocks/css/index.ts b/packages/next/build/webpack/config/blocks/css/index.ts
@@ -14,8 +14,10 @@ import { getPostCssPlugins } from './plugins'
 
 function getClientStyleLoader({
   isDevelopment,
+  assetPrefix,
 }: {
   isDevelopment: boolean
+  assetPrefix: string
 }): webpack.RuleSetUseItem {
   return isDevelopment
     ? {
@@ -62,11 +64,7 @@ function getClientStyleLoader({
       }
     : {
         loader: MiniCssExtractPlugin.loader,
-        options: {
-          // Next.js apps can be mounted at arbitrary URLs, so we must access
-          // our media using a relative URL.
-          publicPath: '../../',
-        },
+        options: { publicPath: `${assetPrefix}/_next/` },
       }
 }
 
@@ -154,7 +152,10 @@ export const css = curry(async function css(
             // Add appropriate development more or production mode style
             // loader
             ctx.isClient &&
-              getClientStyleLoader({ isDevelopment: ctx.isDevelopment }),
+              getClientStyleLoader({
+                isDevelopment: ctx.isDevelopment,
+                assetPrefix: ctx.assetPrefix,
+              }),
 
             // Resolve CSS `@import`s and `url()`s
             {
@@ -231,7 +232,10 @@ export const css = curry(async function css(
             use: [
               // Add appropriate development more or production mode style
               // loader
-              getClientStyleLoader({ isDevelopment: ctx.isDevelopment }),
+              getClientStyleLoader({
+                isDevelopment: ctx.isDevelopment,
+                assetPrefix: ctx.assetPrefix,
+              }),
 
               // Resolve CSS `@import`s and `url()`s
               {

diff --git a/packages/next/build/webpack/config/index.ts b/packages/next/build/webpack/config/index.ts
@@ -13,13 +13,15 @@ export async function build(
     isServer,
     hasSupportCss,
     hasExperimentalData,
+    assetPrefix,
   }: {
     rootDirectory: string
     customAppFile: string | null
     isDevelopment: boolean
     isServer: boolean
     hasSupportCss: boolean
     hasExperimentalData: boolean
+    assetPrefix: string
   }
 ): Promise<webpack.Configuration> {
   const ctx: ConfigurationContext = {
@@ -29,6 +31,11 @@ export async function build(
     isProduction: !isDevelopment,
     isServer,
     isClient: !isServer,
+    assetPrefix: assetPrefix
+      ? assetPrefix.endsWith('/')
+        ? assetPrefix.slice(0, -1)
+        : assetPrefix
+      : '',
   }
 
   const fn = pipe(

diff --git a/packages/next/build/webpack/config/utils.ts b/packages/next/build/webpack/config/utils.ts
@@ -9,6 +9,8 @@ export type ConfigurationContext = {
 
   isServer: boolean
   isClient: boolean
+
+  assetPrefix: string
 }
 
 export type ConfigurationFn = (

diff --git a/test/integration/css/test/index.test.js b/test/integration/css/test/index.test.js
@@ -490,7 +490,7 @@ describe('CSS Support', () => {
       expect(cssFiles.length).toBe(1)
       const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
       expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatch(
-        /^\.red-text\{color:red;background-image:url\(\.\.\/\.\.\/static\/media\/dark\.[a-z0-9]{32}\.svg\) url\(\.\.\/\.\.\/static\/media\/dark2\.[a-z0-9]{32}\.svg\)\}\.blue-text\{color:orange;font-weight:bolder;background-image:url\(\.\.\/\.\.\/static\/media\/light\.[a-z0-9]{32}\.svg\);color:#00f\}$/
+        /^\.red-text\{color:red;background-image:url\(\/_next\/static\/media\/dark\.[a-z0-9]{32}\.svg\) url\(\/_next\/static\/media\/dark2\.[a-z0-9]{32}\.svg\)\}\.blue-text\{color:orange;font-weight:bolder;background-image:url\(\/_next\/static\/media\/light\.[a-z0-9]{32}\.svg\);color:#00f\}$/
       )
 
       const mediaFiles = await readdir(mediaFolder)