问题描述
当我通过运行调用 webpack-dev-server IMO 的脚本查看标准输出时，它正在处理/发出 scss | css 好的。但是，当您转到 devtools 并请求 "localhost: 8080" 时，不包含 css（由开发服务器注入）。就好像css不存在一样。
环境：package.json
"webpack": "^4.38.0","webpack-cli": "^3.3.8","sass-loader": "^7.1.0","mini-css-extract-plugin": "^0.4.1","html-loader": "^0.5.5","html-webpack-plugin": "^3.2.0","css-loader": "^1.0.0","del": "^2.2.2","dialog-polyfill": "^0.5.6","ejs": "^2.5.7","ejs-loader": "^0.3.1","devDependencies": {
"eslint": "^5.12.0","eslint-loader": "^2.1.1","webpack-dev-middleware": "^4.1.0","webpack-dev-server": "^3.7.2"
打包json脚本：
"dev": "GOOG_ATION_CREDE=app/workBox-demos-4dee.json node app/server.js",server.js 使用 express + webpack 中间件
const app = express();
const config = require('../webpack.config.dev.js');
const compiler = webpack(config);
app.use(
webpackDevMiddleware(compiler,{
publicPath: config.output.publicPath,})
webpack.config.dev.js
output: {
filename: '[name].bundle.js',publicPath: '/'
},devtool: 'inline-source-map',devServer: {
contentBase: './',},module: {
rules: [
{ test: /\.js$/,exclude: [
path.resolve(__dirname,"node_modules"),path.resolve(__dirname,"app/scripts/cacheWorker.js")
],use: {
loader: 'babel-loader',}
},{test: /\.html$/,e: [
{
loader: "html-loader",options: { minimize: true }
}
]},{ test: /\.(scss|css)$/,use: [
MiniCssExtractPlugin.loader,{
loader: "css-loader",{
loader: "sass-loader",options: {
includePaths: ['./node_modules']
}
}
]
},]
},plugins: [
new MiniCssExtractPlugin({
filename: "bundle.css",chunkFilename: "[id].css"
}),css 从 express.app 导入
import "../styles/main.css";
import {MDcmenu} from '@material/menu';
import "../styles/camer.css";
来自 $npm run dev 的标准输出
app running http://localhost:8080 /home/rob/src/web-spch-v2/app
Hash: 771fef3df3589e3ab505
Version: webpack 4.46.0
Time: 3719ms
Built at: 01/19/2021 5:21:53 PM
Asset Size Chunks Chunk Names
7719fdcabdc03146e2da973edaac2425.png 17.8 KiB [emitted]
apple-touch-icon.png 9.79 KiB [emitted]
bundle.css 208 KiB main [emitted] main
ec2f90c63e57675db0e442e5d5f5f447.png 813 bytes [emitted]
main.bundle.js 1.2 MiB main [emitted] main
manifest.pwa.json 1.1 KiB [emitted]
scripts/.eslintrc.json 338 bytes [emitted]
scripts/app2.js 21 KiB [emitted]
scripts/cacheWorker.js 1.56 KiB [emitted]
scripts/config.js 3.7 KiB [emitted]
scripts/main.js 16.1 KiB [emitted]
service-worker.js 9.08 KiB [emitted]
service-worker.js.map 10.9 KiB [emitted]
styles/camer.css 12.4 KiB [emitted]
styles/dialog-polyfill.css 636 bytes [emitted]
styles/list.scss 3.05 KiB [emitted]
styles/main.css 5.31 KiB [emitted]
styles/media-player-icon.jpg 11.1 KiB [emitted]
styles/worker/create.js 9.24 KiB [emitted]
styles/zuck_hosp.png 17.8 KiB [emitted]
styles/zuck_hosp_ol.png 17.8 KiB [emitted]
var/browserTyp.html 3.41 KiB [emitted]
var/scripts/Mp3LameEncoder.js 1.27 MiB [emitted]
var/scripts/Mp3LameEncoder.min.js 283 KiB [emitted]
var/scripts/Mp3LameEncoder.min.js.mem 19.2 KiB [emitted]
var/scripts/mp3LameWorker.js 909 bytes [emitted]
var/scripts/recorderGR.js 3.91 KiB [emitted]
var/scripts/voice.js 26.2 KiB [emitted]
var/voice.html 3.46 KiB [emitted]
views/index.ejs 8.93 KiB [emitted]
views/inner.ejs 160 bytes [emitted]
views/logon.ejs 0 bytes [emitted]
views/mail.ejs 3 KiB [emitted]
views/mediaItems.ejs 3.12 KiB [emitted]
views/mediaplay.ejs 2.26 KiB [emitted]
views/tchannel.ejs 1.1 KiB [emitted]
views/test.ejs 1.77 KiB [emitted]
views/userchannel.ejs 1.56 KiB [emitted]
views/usermediaitems.ejs 2.33 KiB [emitted]
views/userplay.ejs 2.27 KiB [emitted]
workBox-3b8b670f.js 67.7 KiB [emitted]
workBox-3b8b670f.js.map 116 KiB [emitted]
workBox-demos-4d4e77aa9fee.json 2.31 KiB [emitted]
Entrypoint main = bundle.css main.bundle.js
解决方法
您没有在 css 加载器上方包含 style loader：
npm install --save-dev style-loader
然后在 webpack.config.js 中：
{
loader: "style-loader",},{
loader: "css-loader",{
loader: "sass-loader",options: {
includePaths: ['./node_modules']
}
}