未在vue组件中复制作用域css

Question

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

Answer 1

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