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

Add support for SCSS options #11063

Merged
merged 9 commits into from
Mar 16, 2020
Merged
1 change: 1 addition & 0 deletions packages/next/build/webpack-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -897,6 +897,7 @@ export default async function getBaseWebpackConfig(
hasSupportCss: !!config.experimental.css,
hasSupportScss: !!config.experimental.scss,
assetPrefix: config.assetPrefix || '',
sassOptions: config.experimental.sassOptions,
})

if (typeof config.webpack === 'function') {
Expand Down
1 change: 1 addition & 0 deletions packages/next/build/webpack/config/blocks/css/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export const css = curry(async function css(
// Source maps are required so that `resolve-url-loader` can locate
// files original to their source directory.
sourceMap: true,
sassOptions: ctx.sassOptions,
},
},
// Then, `sass-loader` will have passed-through CSS imports as-is instead
Expand Down
3 changes: 3 additions & 0 deletions packages/next/build/webpack/config/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export async function build(
hasSupportCss,
hasSupportScss,
assetPrefix,
sassOptions,
}: {
rootDirectory: string
customAppFile: string | null
Expand All @@ -21,6 +22,7 @@ export async function build(
hasSupportCss: boolean
hasSupportScss: boolean
assetPrefix: string
sassOptions: any
}
): Promise<webpack.Configuration> {
const ctx: ConfigurationContext = {
Expand All @@ -35,6 +37,7 @@ export async function build(
? assetPrefix.slice(0, -1)
: assetPrefix
: '',
sassOptions,
}

const fn = pipe(base(ctx), css(hasSupportCss, hasSupportScss, ctx))
Expand Down
2 changes: 2 additions & 0 deletions packages/next/build/webpack/config/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ export type ConfigurationContext = {
isClient: boolean

assetPrefix: string

sassOptions: any
}

export type ConfigurationFn = (
Expand Down
1 change: 1 addition & 0 deletions packages/next/next-server/server/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ const defaultConfig: { [key: string]: any } = {
reactMode: 'legacy',
workerThreads: false,
basePath: '',
sassOptions: {},
},
future: {
excludeDefaultMomentLocales: false,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
const path = require('path')

module.exports = {
experimental: {
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
},
},
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { redText } from './index.module.scss'

export default function Home() {
return (
<div id="verify-red" className={redText}>
This text should be red.
</div>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@import '_vars.scss';

.redText {
color: $var;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
$var: red;
28 changes: 28 additions & 0 deletions test/integration/scss/test/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,34 @@ describe('SCSS Support', () => {
})
})

describe('Basic Module Include Paths Support', () => {
const appDir = join(fixturesDir, 'basic-module-include-paths')

beforeAll(async () => {
await remove(join(appDir, '.next'))
})

it('should compile successfully', async () => {
const { code, stdout } = await nextBuild(appDir, [], {
stdout: true,
})
expect(code).toBe(0)
expect(stdout).toMatch(/Compiled successfully/)
})

it(`should've emitted a single CSS file`, async () => {
const cssFolder = join(appDir, '.next/static/css')

const files = await readdir(cssFolder)
const cssFiles = files.filter(f => /\.css$/.test(f))

expect(cssFiles.length).toBe(1)
expect(await readFile(join(cssFolder, cssFiles[0]), 'utf8')).toContain(
'color:red'
)
})
})

describe('Basic Global Support with src/ dir', () => {
const appDir = join(fixturesDir, 'single-global-src')

Expand Down