vue-loader无法解析vue里的stylus的style，外部引入styl文件可以解析，引入VueLoaderPlugin也没用

先贴webpack.config.js的配置文件

const path =  require('path');
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
    mode: process.env.NODE_ENV || 'production',
    devtool: "source-map",
    target:'web',
    entry:path.join(__dirname,'src/index.js'),
    output:{
        filename:"build.js",
        path:path.join(__dirname,'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test:/\.jsx$/,
                use:['babel-loader']
            },
            {
		        test: /\.styl(us)?$/,//若不填写(us)?则无法解析vue里的style stylus样式
		        use: [
		            'vue-style-loader',
		            'css-loader',
		            {
		                loader: 'postcss-loader',
		                options: { sourceMap: true }
		            },
		            'stylus-loader'
		        ]
            },
            {
                test:/\.css$/,
                use:[
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test:/(\.gif|\.jpg|\.jpeg|\.png|\.svg)$/,
                use:[
                    {
                        loader:"url-loader",
                        options:{
                            name:'[name][hash].[ext]',
                            limit:1024
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin()
    ]
}
if(process.env.NODE_ENV=='development'){
    config.plugins.push(new webpack.NoEmitOnErrorsPlugin())
    config.plugins.push(new webpack.HotModuleReplacementPlugin())
    config.devServer={
        contentBase: path.join(__dirname, 'dist'),
        overlay:{
          errors:true
        },
        hot:true,
        compress: true,
        port: 9000
    }
}
module.exports = config;

配置版本

 "dependencies": {
 	..................
    "css-loader": "^5.0.1",
    "stylus": "^0.54.8",
    "stylus-loader": "^3.0.2",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.6",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },

vue文件样式

<style lang="stylus" scoped>
    #app
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        #cover
            position absolute
            left 0
            right 0
            top 0
            bottom 0
            background-color #999
            opacity 0.2
            z-index -1
</style>

按理说也加入了VueLoaderPlugin这个插件了，但是npm run dev 依旧报错

我就很纳闷了，我直接引入stylu文件就可以直接运行，vue里面写stylus样式就报错
经过多次排查问题和网上查阅资料，问题定位到css-loader版本问题，在css-loader@4.xxx以后存在这个问题 具体看博文
https://juejin.cn/post/6871160788074266637

解决方案
除了按上面博文里的处理方式，还可以直接降低版本

npm uninstall css-loader
npm install css-loader@^3

重新npm run dev 就可以了 我裂开 找了一两个小时的问题解决方案