我在我的打字稿和 webpack 项目中使用 MiniCssExtractPlugin。
我的 MiniCssExtractPlugin 的 webpack 配置看起来像
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './src/index.tsx',
mode: "development",
output: {
path: path.resolve(__dirname, "build"),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader"
},
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
modules: true,
sourceMap: true,
importLoader: 2
}
},
"sass-loader"
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "foo.css",
chunkFilename: "[id].css"
})],
devtool: "source-map",
resolve: {
extensions: [".js", ".ts", ".tsx"]
}
}
现在我项目中的 scss 文件有这个片段
h1 {
border-bottom: 3px solid #880055;
display: inline;
}
.container {
font-size: 1.3rem;
}
.is-completed {
text-decoration: line-through;
color: #00ff00;
}
当我的应用程序运行时,npm start
我可以看到标题 H1 有一个颜色的下划线880055
。所以这意味着我的 scss 文件被正确读取。
如果我进入 chrome 开发人员工具并进入网络选项卡并查找 CSS。我可以看到正在下载 foo.css。如果我查看 foo.css 的内容
它没有我的“已完成”课程。相反,我看到类似
h1 {
border-bottom: 3px solid #880055;
display: inline; }
.pxcHIyOVHeytUeG27u4TO {
font-size: 1.3rem; }
._1Z5_KVJNKd1X2P3HKM63j {
text-decoration: line-through;
color: #00ff00; }
所以像 h1 这样的元素类是好的,但是其他的都是乱码。这是怎么回事?