我正在尝试安装并使用一个node_module来在我的scss上使用（在这种情况下：poly-fluid-sizing https://www.npmjs.com/package/poly-fluid-sizing）
我的package.json
"name": "theme",
"version": "1.0.1",
"description": "WP Tailwind",
"main": "./assets/js/main.js",
"scripts": {
"start": "cross-env NODE_ENV=development SERVER=true webpack --watch",
"watch": "cross-env NODE_ENV=development webpack --watch",
"dev": "cross-env NODE_ENV=development webpack",
"prod": "cross-env NODE_ENV=production webpack",
"build": "concurrently \"npm run prod\" \"npm run dev\""
},
"devDependencies": {
"@babel/core": "^7.10.4",
"@babel/polyfill": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@fullhuman/postcss-purgecss": "^1.3.0",
"autoprefixer": "^8.4.1",
"babel-loader": "^8.1.0",
"browser-sync": "^2.26.7",
"browser-sync-webpack-plugin": "^2.0.0",
"concurrently": "^3.6.1",
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^5.2.1",
"css-loader": "^2.1.1",
"cssnano": "^4.1.10",
"imagemin-webpack-plugin": "^2.4.2",
"mini-css-extract-plugin": "^0.6.0",
"postcss-loader": "^2.1.4",
"precss": "^4.0.0",
"resolve-url-loader": "^2.3.2",
"sass": "^1.26.10",
"style-loader": "^0.21.0",
"tailwindcss": "^1.4.6",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"poly-fluid-sizing": "^1.1.0",
"postcss-custom-properties": "^8.0.11",
"postcss-import": "^12.0.1",
"postcss-nested": "^4.2.1",
"postcss-scss": "^2.1.1",
"regenerator": "^0.14.5",
"sass-loader": "^10.0.1"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 11"
],
"engines": {
"node": ">=10.5.0",
"npm": ">=6.4.1"
},
"author": "",
"license": "ISC"
}
webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const ImageminPlugin = require("imagemin-webpack-plugin").default;
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");
const PurgeCSS = require("@fullhuman/postcss-purgecss");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const isProduction = "production" === process.env.NODE_ENV;
// Set the build prefix.
let prefix = isProduction ? ".min" : "";
// Set the PostCSS Plugins.
const post_css_plugins = [
require("postcss-import"),
require("tailwindcss")("./tailwind.js"),
require("postcss-nested"),
require("postcss-custom-properties"),
require("autoprefixer"),
require("precss"),
];
// Add PurgeCSS for production builds.
if (isProduction) {
post_css_plugins.push(require("cssnano"));
post_css_plugins.push(
PurgeCSS({
content: [
"./*.php",
"./src/**/*.php",
"./template-parts/**/*.php",
"./assets/images/**/*.svg",
"./assets/css/whitelist/*.css",
"./../../mu-plugins/app/src/components/**/*.php",
],
css: ["./node_modules/tailwindcss/dist/base.css"],
extractors: [
{
extractor: class TailwindExtractor {
static extract(content) {
return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
}
},
extensions: ["php", "js", "svg", "css", "scss"],
},
],
whitelistPatterns: getCSSWhitelistPatterns(),
})
);
}
const config = {
entry: "./assets/js/main.js",
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true,
}),
],
},
output: {
filename: `[name]${prefix}.js`,
path: path.resolve(__dirname, "dist"),
},
mode: process.env.NODE_ENV,
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
options: {
presets: [["@babel/preset-env"]],
},
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
importLoaders: 1,
context: "postcss",
sourceMap: !isProduction,
},
},
{
loader: "postcss-loader",
options: {
ident: "postcss",
sourceMap: isProduction || "inline",
plugins: post_css_plugins,
parser: "postcss-scss",
},
},
],
},
],
},
resolve: {
alias: {
"@": path.resolve("assets"),
"@images": path.resolve("../images"),
},
modules: ['node_modules'],
extensions: ['.css', '.scss', '.js'],
},
plugins: [
new MiniCssExtractPlugin({
filename: `[name]${prefix}.css`,
}),
new CopyWebpackPlugin([
{
from: "./assets/images/",
to: "images",
ignore: [".DS_Store"],
},
]),
new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i }),
],
};
// Fire up a local server if requested
if (process.env.SERVER) {
config.plugins.push(
new BrowserSyncPlugin({
proxy: "website.local",
files: ["**/*.php", "**/*.css", "**/*.scss"],
port: 3000,
notify: false,
})
);
}
/**
* List of RegExp patterns for PurgeCSS
* @returns {RegExp[]}
*/
function getCSSWhitelistPatterns() {
return [
/^home(-.*)?$/,
/^blog(-.*)?$/,
/^archive(-.*)?$/,
/^date(-.*)?$/,
/^error404(-.*)?$/,
/^admin-bar(-.*)?$/,
/^search(-.*)?$/,
/^nav(-.*)?$/,
/^wp(-.*)?$/,
/^screen(-.*)?$/,
/^navigation(-.*)?$/,
/^(.*)-template(-.*)?$/,
/^(.*)?-?single(-.*)?$/,
/^postid-(.*)?$/,
/^post-(.*)?$/,
/^attachmentid-(.*)?$/,
/^attachment(-.*)?$/,
/^page(-.*)?$/,
/^(post-type-)?archive(-.*)?$/,
/^author(-.*)?$/,
/^category(-.*)?$/,
/^tag(-.*)?$/,
/^menu(-.*)?$/,
/^tags(-.*)?$/,
/^tax-(.*)?$/,
/^term-(.*)?$/,
/^date-(.*)?$/,
/^(.*)?-?paged(-.*)?$/,
/^depth(-.*)?$/,
/^children(-.*)?$/,
];
}
module.exports = config;
我的app.css（用于生成最终代码）
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "utils/all";
@import "whitelist/whitelist.css";
@import "conditional/conditional.css";
@import "components/all";
当我运行此程序时，一切都很好（要注意，tailwindcss也是一个模块，但使用.css文件并在其中调用）
结果日志：
Version: webpack 4.44.1
Time: 6498ms
Built at: 09/22/2020 2:33:48 PM
Asset Size Chunks Chunk Names
images/crm-integrations.png 84.8 KiB [emitted]
images/partner.png 115 KiB [emitted]
images/small-logo-placeholder.png 343 bytes [emitted]
images/svg/icon-chart.svg 428 bytes [emitted]
images/svg/icon-gear.svg 2.08 KiB [emitted]
images/svg/icon-growth.svg 432 bytes [emitted]
images/svg/icon-instagram.svg 492 bytes [emitted]
images/svg/icon-knowledge.svg 659 bytes [emitted]
images/svg/icon-mark-white.svg 369 bytes [emitted]
images/svg/icon-person.svg 749 bytes [emitted]
images/svg/icon-ribbon.svg 717 bytes [emitted]
images/svg/icon-search.svg 522 bytes [emitted]
images/svg/icon-toolbox.svg 545 bytes [emitted]
images/svg/icon-twitter.svg 633 bytes [emitted]
images/svg/logo.svg 2.24 KiB [emitted]
images/svg/monitor-window.svg 4.16 KiB [emitted]
images/tlf-solutions.png 159 KiB [emitted]
main.css 1.48 MiB main [emitted] main
main.js 5.8 KiB main [emitted] main
Entrypoint main = main.css main.js
[./assets/css/app.css] 39 bytes {main} [built]
[./assets/js/main.js] 178 bytes {main} [built]
[./assets/js/modules/menu.js] 546 bytes {main} [built]
+ 1 hidden module
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/postcss-loader/lib/index.js??postcss!assets/css/app.css:
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/lib/index.js?!./assets/css/app.css] ./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/lib??postcss!./assets/css/app.css 3.49 MiB {mini-css-extract-plugin} [built]
+ 1 hidden module
然后，当我添加@import“ poly-fluid-sizing”时；到app.css文件，它给了我这个：
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Error: Failed to find 'poly-fluid-sizing'
in [
/Users/marcoperalta/work/sites/wl/mondago/app/public/wp-content/themes/mondago/assets/css
]
at resolveModule.catch.catch (/Users/marcoperalta/work/sites/wl/mondago/app/public/wp-content/themes/mondago/node_modules/postcss-import/lib/resolve-id.js:35:13)
at runLoaders (/Users/marcoperalta/work/sites/wl/mondago/app/public/wp-content/themes/mondago/node_modules/webpack/lib/NormalModule.js:316:20)
at /Users/marcoperalta/work/sites/wl/mondago/app/public/wp-content/themes/mondago/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/marcoperalta/work/sites/wl/mondago/app/public/wp-content/themes/mondago/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Users/marcoperalta/work/sites/wl/mondago/app/public/wp-content/themes/mondago/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Promise.resolve.then.then.catch (/Users/marcoperalta/work/sites/wl/mondago/app/public/wp-content/themes/mondago/node_modules/postcss-loader/lib/index.js:194:71)
@ ./assets/js/main.js 2:0-24
我尝试安装sass-loader，使用/ sass-loader定位/ node_modules / poly-fluid-sizing中的文件，并直接调用@import“〜poly-fluid-sizing”等，一切都会引发不同的错误，我可以似乎没有解决。
请帮忙吗？