fix css extraction and pre-processors in vue-loader

This commit is contained in:
Evan You
2018-01-07 22:15:50 -05:00
parent 15be241628
commit d0de715813
5 changed files with 15 additions and 9 deletions
@@ -23,6 +23,9 @@ const entryVue = `
data: () => ({ msg: 'hi' })
}
</script>
<style>
h1 { color: red }
</style>
`.trim()
const entryJs = `
@@ -62,6 +65,7 @@ test('global build', async () => {
const hasFile = file => fs.existsSync(path.join(distDir, file))
expect(hasFile('index.html')).toBe(true)
expect(hasFile('static/js')).toBe(true)
expect(hasFile('static/css')).toBe(true)
const port = await portfinder.getPortPromise()
server = createServer({ root: distDir })
@@ -39,14 +39,13 @@ module.exports = function createConfigPlugin (context, entry) {
.rule('vue')
.use('vue-loader')
.tap(options => {
return Object.assign({
loaders: {
js: {
loader: 'babel-loader',
options: babelOptions
}
options.loaders = Object.assign({
js: {
loader: 'babel-loader',
options: babelOptions
}
}, options)
}, options.loaders)
return options
})
// set inline babel options
@@ -25,6 +25,7 @@ test('serve', async () => {
expect(hasFile('index.html')).toBe(true)
expect(hasFile('favicon.ico')).toBe(true)
expect(hasFile('static/js')).toBe(true)
expect(hasFile('static/css')).toBe(true)
expect(hasFile('foo.js')).toBe(true)
const port = await portfinder.getPortPromise()
+3 -1
View File
@@ -19,6 +19,8 @@ module.exports = (api, options) => {
.tap(options => {
// ensure user injected vueLoaderOptions take higher priority
options.loaders = Object.assign(resolver.vue(), options.loaders)
options.cssSourceMap = !!options.cssSourceMap
return options
})
// apply css loaders for standalone style files outside vue-loader
@@ -70,7 +72,7 @@ module.exports = (api, options) => {
webpackConfig
.plugin('extract-css')
.use(ExtractTextPlugin, [Object.assign({
filename: '[name].[contenthash:8].css',
filename: `${options.staticDir}/css/[name].[contenthash:8].css`,
allChunks: true
}, userOptions)])
}
@@ -183,7 +183,7 @@ module.exports = class CSSLoaderResolver {
* })
*/
vue (options = {}) {
this.postcssOptions = false
this.postcss = false
this.cssModules = false
const loaders = {}
for (const lang of ['css', 'sass', 'scss', 'less', 'stylus', 'styl']) {