范围 css 未复制到 vue 组件中

Question

I have a scoped style tag in my vue component:

<style scoped>
    .ttt{
        background-color: red;
    }
</style>

When I build my project with npm and webpack, the styles are not copied. I already configured css to have it parsed by postCss to solve it:

var path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    mode: 'development',
    devtool: 'source-map',
    entry: {
        build: './assets/js/main.js'
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: './dist/',
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {//required for css in vue components
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    {
                        loader: 'css-loader',
                        options: { importLoaders: 1 }
                    },
                    'postcss-loader'
                ]
            },
            {
                test: /\.svg$/,
                oneOf: [
                    {
                        resourceQuery: /inline/,
                        use: [
                            'babel-loader',
                            {
                                loader: 'vue-svg-loader',
                                options: {
                                    svgo: {
                                        plugins: [
                                            { cleanupIDs: false },
                                            { collapseGroups: false },
                                        ],
                                    },
                                }
                            },
                        ],
                    },
                    {
                        type: 'asset/resource',
                        generator: {
                            filename: '[name].[ext]?[hash]'
                        }
                    },
                ],
            },
        ]
    },
    resolve: { alias: { vue: 'vue/dist/vue.esm.js' } },
    plugins: [
        new VueLoaderPlugin()
    ],
    performance: {
        hints: 'warning'
    }
};

There is no error outputted in npm or the browser console.

Am I missing something?

Versions:

"dependencies": {
    "axios": "^0.18.0",
    "vue": "^2.6.12",
    "vue-excel-editor": "1.3.90",
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "babel-loader": "^8.2.2",
    "@babel/preset-env": "^7.12.11",
    "cross-env": "^5.0.5",
    "css-loader": "^5.0.1",
    "postcss": "^8.2.2",
    "postcss-loader": "^4.1.0",
    "terser-webpack-plugin": "^5.0.3",
    "vue-loader": "^15.9.6",
    "vue-style-loader": "^4.1.2",
    "vue-svg-loader": "^0.16.0",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.1.1",
    "webpack-merge": "^5.7.3"
  }

Answer 1

Try change options: { importLoaders: 1 } to options: { importLoaders: 2 } .