mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-23 14:15:13 +00:00
fix: style module with extractCSS not work well (#4093)
* fix: style module with extractCSS not work well * test: improve extract css test * fix: exract css name
This commit is contained in:
parent
90db0aded8
commit
521c3778bd
@ -65,7 +65,10 @@ export default class StyleLoader {
|
||||
|
||||
cssModules(options) {
|
||||
options.modules = true
|
||||
return this.css(options)
|
||||
return {
|
||||
loader: 'css-loader',
|
||||
options
|
||||
}
|
||||
}
|
||||
|
||||
extract() {
|
||||
|
5
test/fixtures/extract-css/nuxt.config.js
vendored
5
test/fixtures/extract-css/nuxt.config.js
vendored
@ -12,6 +12,11 @@ export default {
|
||||
grid: true
|
||||
}
|
||||
}
|
||||
},
|
||||
filenames: {
|
||||
css: () => {
|
||||
return '[name].css'
|
||||
}
|
||||
}
|
||||
},
|
||||
css: [
|
||||
|
11
test/fixtures/extract-css/pages/about.vue
vendored
Normal file
11
test/fixtures/extract-css/pages/about.vue
vendored
Normal file
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 :class="$style.test">I'm BLUE</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style module>
|
||||
.test {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
@ -1,15 +1,33 @@
|
||||
import { resolve } from 'path'
|
||||
import fs from 'fs'
|
||||
import { promisify } from 'util'
|
||||
import { loadFixture, getPort, Nuxt } from '../utils'
|
||||
|
||||
let nuxt = null
|
||||
const readFile = promisify(fs.readFile)
|
||||
const isWindows = /^win/.test(process.platform)
|
||||
|
||||
describe('extract css', () => {
|
||||
// TODO: make css chunk name predictive
|
||||
beforeAll(async () => {
|
||||
const options = await loadFixture('extract-css')
|
||||
nuxt = new Nuxt(options)
|
||||
await nuxt.listen(await getPort(), '0.0.0.0')
|
||||
})
|
||||
|
||||
test('Verify global.css has been extracted and minified', async () => {
|
||||
const pathToMinifiedGlobalCss = resolve(__dirname, '..', 'fixtures/extract-css/.nuxt/dist/client/7dc53e76acc7df734a24.css')
|
||||
const content = await readFile(pathToMinifiedGlobalCss, 'utf-8')
|
||||
const expectedContent = 'h1[data-v-180e2718]{color:red}.container[data-v-180e2718]{display:-ms-grid;display:grid;-ms-grid-columns:60px 60px 60px 60px 60px;grid-template-columns:60px 60px 60px 60px 60px;-ms-grid-rows:30px 30px;grid-template-rows:30px 30px;grid-auto-flow:row}'
|
||||
expect(content).toBe(expectedContent)
|
||||
const fileName = isWindows ? 'pages_index.css' : 'pages/index.css'
|
||||
const extractedIndexCss = resolve(__dirname, '..', 'fixtures/extract-css/.nuxt/dist/client', fileName)
|
||||
const content = await readFile(extractedIndexCss, 'utf-8')
|
||||
|
||||
const scopeCss = /^h1\[data-v-[a-zA-Z0-9]{8}\]\{color:red\}\.container\[data-v-[a-zA-Z0-9]{8}\]/
|
||||
expect(content).toMatch(scopeCss)
|
||||
|
||||
const containerStyle = '{display:-ms-grid;display:grid;-ms-grid-columns:60px 60px 60px 60px 60px;grid-template-columns:60px 60px 60px 60px 60px;-ms-grid-rows:30px 30px;grid-template-rows:30px 30px;grid-auto-flow:row}'
|
||||
expect(content).toContain(containerStyle)
|
||||
})
|
||||
|
||||
test('/about should contain module style', async () => {
|
||||
const { html } = await nuxt.renderRoute('/about')
|
||||
expect(html).toMatch(/<h1 class="test_[a-zA-Z0-9]{5}">I'm BLUE<\/h1>/)
|
||||
})
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user