![](/img/trans.png)
[英]Webpack: mini-css-extract-plugin not outputting css file
[英]Webpack cannot find module mini-css-extract-plugin
我正在使用 Webpack ^4.26.0。 在用於 CSS 之前,我已經在 Webpack 3 中使用了“extract-text-webpack-plugin”。 但是我已經讀到該插件在 Webpack 4 上不再工作了。“extract-text-webpack-plugin”建議使用“mini-css-extract-plugin”插件。
我已經通過以下命令安裝了插件:
npm install --save-dev mini-css-extract-plugin
並需要 webpackconfig 中的插件,還將其添加到我的規則和插件中:
// webpack.config.js
const webpack = require("webpack");
const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const config = {
context: path.resolve(__dirname),
entry: "./index.js",
devServer: {
contentBase: "./dist"
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname),
use: [
{
loader: "babel-loader",
options: {
presets: [["@babel/env", { modules: false }], "@babel/react"]
}
}
]
},
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader"
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
],
noParse: [/aws-sdk/]
},
plugins: [
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
"process.env.STATIC_PORT": JSON.stringify(process.env.STATIC_PORT),
VERSION: JSON.stringify(require("./package.json").version)
}),
new MiniCssExtractPlugin({
filename: 'bundle.css'
}),
new CopyWebpackPlugin([{ from: "./cb_icons", to: "cb_icons" }])
],
node: { fs: "empty" },
externals: [{ "./cptable": "var cptable" }, { "./jszip": "jszip" }]
};
module.exports = config;
它安裝在我的 node_modules 中:
組件/searchkit/node_modules/mini-css-extract-plugin
我遇到了與此完全相同的問題。 我收到錯誤的原因是因為我的 package.json 文件中缺少 webpack.config.js 中引用的開發依賴項。
因此,例如在 OP 的情況下,一些需要在 devDependencies 中的東西將是 babel-loader、awesome-typescript-loader、css-loader 等。仔細檢查這些都在 devDependencies 中。
默認情況下,Heroku 將安裝 package.json 中列出的所有依賴項,位於依賴項和 devDependencies 下。 在運行安裝和構建步驟之后,Heroku 將在部署應用程序之前去除在 devDependencies 下聲明的包。
來源: https : //devcenter.heroku.com/articles/nodejs-support
如果您在運行時需要 devDependencies,您可以將其卸載並將其安裝為運行時依賴項,或者將 heroku 環境變量設置為 withold 以防止修剪您的 devDependencies。
在命令行中,它看起來像這樣:
heroku config:set NPM_CONFIG_PRODUCTION=false
如果它的顯示模塊錯誤而不是檢查您的導入或需要模塊,例如 ..
var mini-css-extract-plugin = require("mini-css-extract-plugin")
如果您已經安裝了該軟件包並且可以在 package.json 文件(在 devDependencies 下)中看到它,您可能只需要使用以下命令將全局安裝的軟件包鏈接到您的項目。
npm link mini-css-extract-plugin
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.