topic description
the styles in the components of vue use postcss, but when the self-configured webpack is packaged, it is found that the nested styles are not recognized, resulting in the invalidation of some styles
related codes
vue component code:
const path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "production",
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
publicPath: "/dist/",
filename: "index.js"
},
module: {
rules: [
{
test: /\.vue$/,
use: [
"vue-loader"
]
},
{
test: /.css$/,
use: [
"vue-style-loader",
"css-loader"]
},
{
test:/\.pcss$/,
use:[
{
loader: "postcss-loader",
options: {
plugins: () => [require("autoprefixer")]
}
}
]
},
{
test:/\.(gif|png|jpg|woff|svg|eot|ttf)/,
use:[
{
loader:"url-loader",
options: {
limit: 8192
}
}
],
}
]
},
plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
resolve: {
extensions: [".vue",".js"],
alias: {
vue$: "vue/dist/vue.esm.js"
}
},
devServer: {
port: 9000
}
};
after packaging, it is found that only .styles-img-con
are recognized, but .blank-img
is not.
what should I do to pack normally? in addition, I just learned from webpack, that there is something wrong with the configuration of webpack. Please point out
.