未在 vue 组件中复制范围内的 css

问题描述

我的 vue 组件中有一个作用域样式标签：

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

当我使用 npm 和 webpack 构建我的项目时，样式不会被复制。我已经配置了 css 让它由 postCss 解析来解决它：

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'
    }
};

npm 或浏览器控制台都没有输出错误。

我错过了什么吗？

版本：

"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"
  }

解决方法

尝试将 options: { importLoaders: 1 } 更改为 options: { importLoaders: 2 }。