Блог

Я пытаюсь установить и использовать 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;
  

my 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, нацеливаясь на файл в /node_modules / poly-fluid-sizing, используя sass-loader и вызывая @import «~poly-fluid-sizing» Напрямую и т. Д., И все выдает другую ошибку, которую я, похоже, не могу разрешить.

Любая помощь, пожалуйста?