vue-loader解析<style/>出错

[tyrion-yu]

版本

"vue-loader": "^9.5.1"
"webpack": "^2.1.0-beta.1"
"webpack-dev-server": "2.1.0-beta.9"

Webpack dev server 在浏览器的控制台输出

./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?id=data-v-7c2d53b8!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/pages/lab/fe-watch-table/components/canvas-group.vue
Module build failed: TypeError: Path must be a string. Received undefined
    at assertPath (path.js:7:11)
    at Object.relative (path.js:536:5)
    at Object.<anonymous> (D:\h\app-home-design-peon\node_modules\css-loader\lib\loader.js:101:19)
    at Array.map (native)
    at Object.<anonymous> (D:\h\app-home-design-peon\node_modules\css-loader\lib\loader.js:99:31)
    at D:\h\app-home-design-peon\node_modules\css-loader\lib\processCss.js:199:3
    at process._tickCallback (internal/process/next_tick.js:103:7)
 @ ./~/vue-style-loader!./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?id=data-v-7c2d53b8!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/pages/lab/fe-watch-table/components/canvas-group.vue 4:14-264 13:2-17:4 14:20-270
 @ ./src/pages/lab/fe-watch-table/components/canvas-group.vue
 @ ./~/babel-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./src/pages/lab/fe-watch-table/components/app.vue
 @ ./src/pages/lab/fe-watch-table/components/app.vue
 @ ./src/pages/lab/fe-watch-table/main.es6
 @ multi fe-watch-table

出错的文件的源码

canvas-group.vue

<template>
    <section>
        <h3>{{groupName}} 流量统计</h3>
        <div class="my-canvas" :id="index+'-pv'"></div>
        <h3>{{groupName}} 性能统计</h3>
        <div class="my-canvas" :id="index+'-time'"></div>
    </section>
</template>

<style>
    .my-canvas {
        width: 600px;
        height: 400px;
        border: 1px solid #e0e0e0;
    }
</style>

<script>
    export default {
        props: ['groupName','index'],
        data(){
            return {}
        },
        events: {},
        methods: {}
    }
</script>

去掉<style/> 就不报错了。

webpack config - loader

loaders: [{
            test: /\.(es6)$/,
            loader: 'babel',
            exclude: /node_modules/,
            query: {
                plugins: ["transform-object-rest-spread"]
            }
        }, {
            test: /\.css$/,
            loader: "style!css?-restructuring!postcss"
        }, {
            test: /\.css\.module/,
            loader: "style!css?-restructuring&modules&localIdentName=[local]___[hash:base64:5]!postcss"
        }, {
            test: /\.woff|ttf|woff2|eot$/,
            loader: 'url?limit=100000'
        }, {
            test: /\.less$/,
            loader: "style!css!postcss!less"
        }, {
            test: /\.less\.module/,
            loader: "style!css?modules&localIdentName=[local]___[hash:base64:5]!postcss!less"
        }, {
            test: /\.(jpeg?|png|gif|svg|jpg)$/i,
            loaders: ['url?limit=25000']
        }, {
            test: /\.vue$/,
            loader: 'vue'
 }]

[yyx990803]

无法重现。请提供完整的 bug 重现，并且尽量缩小问题范围。

[tyrion-yu]

here is the repro:

https://github.com/tyrion-yu/vue-loader-bug

[doxiaodong]

"postcss-loader": "^1.0.0",
"style-loader": "^0.13.1",
"vue-loader": "^9.7.0",
"webpack": "^2.1.0-beta.25"

same with me

[flashios09]

Same with me :(

ERROR in ./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?id=data-v-524eb2ce!./~/vue-loader/lib/selector.js?type=styles&index=0!./webroot/js/App.vue
Module build failed: TypeError: Path must be a string. Received undefined
    at assertPath (path.js:7:11)
    at Object.relative (path.js:1226:5)
    at Object.<anonymous> (/Volumes/Data/Sites/hotelas/node_modules/css-loader/lib/loader.js:101:19)
    at Array.map (native)
    at Object.<anonymous> (/Volumes/Data/Sites/hotelas/node_modules/css-loader/lib/loader.js:99:31)
    at /Volumes/Data/Sites/hotelas/node_modules/css-loader/lib/processCss.js:201:3
    at process._tickCallback (internal/process/next_tick.js:103:7)
 @ ./~/vue-style-loader!./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?id=data-v-524eb2ce!./~/vue-loader/lib/selector.js?type=styles&index=0!./webroot/js/App.vue 4:14-228 13:3-17:5 14:22-236
 @ ./webroot/js/App.vue
 @ ./webroot/js/app.js
 @ multi ./.webpack/server-client ./webroot/scss/app.scss ./webroot/js/app.js

@tyrion-yu have you solved this error ?

[flashios09]

if i add lang="scss" it works

<style lang="scss">
body {
  color: red;
}
</style>

[kazupon]

Are you still happened this issue using the 10.3 ?

[yyx990803]

Closing due to inactivity. Please open a new issue with a reference to this one if you can follow up with more information.

[0x1af2aec8f957]

你好，該問題是由於你的webpack.config.js導致的。你可以重新初始化一個vue項目，替換這個文件就可以了！也可參考module下：``
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here
}
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]

[lfnb]

@tyrion-yu chuanPro的是正解
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
'css':'vue-style-loader!css-loader',
'style':'vue-style-loader',
'less':'vue-style-loader!css-loader!less-loader'
}

[tyrion-yu]

it did ok , thx !