从Laravel Mix PostCss中排除文件夹，以便它不会运行两次？

编程问答 2022-06-09

问题描述

我想从选择通过Laravel Mix .PostCss（）运行时排除选择node_modules文件夹-这样，已经用自定义Webkit代码处理过的文件不会再次通过PostCss运行。这是ckeditor5源代码的自定义postCss代码。

现在我收到此错误：

@ multi ./resources/js/app.js ./resources/css/app.css

ERROR in ./node_modules/@ckeditor/ckeditor5-engine/theme/placeholder.css (./node_modules/css-loader??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/style-loader??ref--12-0!./node_modules/postcss-loader/src??ref--12-1!./node_modules/@ckeditor/ckeditor5-engine/theme/placeholder.css)
Module build Failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(2:1) UnkNown word

  1 |
> 2 | var content = require("!!../../../postcss-loader/src/index.js??ref--12-1!./placeholder.css");

我正在使用以下自定义代码：https://github.com/ckeditor/ckeditor5-vue/issues/23#issuecomment-455756667 看来这是完美的方法-但不适用于Laravels的新Jetstream脚手架，该脚手架包括用于包含TailwindCss和PostCss的代码，不幸的是，这些代码可以在所有已处理的ckeditor文件上运行：

我的webpack.mix.js看起来像这样：

    const mix = require('laravel-mix');
    
    const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
    const CKEStyles = require('@ckeditor/ckeditor5-dev-utils').styles;
    const CKERegex = {
        svg: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,css: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,};
    
    Mix.listen('configReady',webpackConfig => {
        const rules = webpackConfig.module.rules;
        const targetSVG = /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/;
        const targetFont = /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/;
        const targetCSS = /\.css$/;
    
        // exclude CKE regex from mix's default rules
        for (let rule of rules) {
            if (rule.test.toString() === targetSVG.toString()) {
                rule.exclude = CKERegex.svg;
            } else if (rule.test.toString() === targetFont.toString()) {
                rule.exclude = CKERegex.svg;
            } else if (rule.test.toString() === targetCSS.toString()) {
                rule.exclude = CKERegex.css;
            }
        }
    
    });
    
    mix.webpackConfig({
                          plugins: [
                              new CKEditorWebpackPlugin({
                                                            language: 'en',}),],module: {
                              rules: [
                                  {
                                      test: CKERegex.svg,use: ['raw-loader'],},{
                                      test: CKERegex.css,use: [
                                          {
                                              loader: 'style-loader',options: {
                                                  singleton: true,{
                                              loader: 'postcss-loader',options: CKEStyles.getPostCssConfig({
                                                                                      themeImporter: {
                                                                                          themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),minify: true,});
    
    mix.js('resources/js/app.js','public/js')
        .postCss('resources/css/app.css','public/css',[
            require('postcss-import'),require('tailwindcss'),]);

在我看来，我需要从.postCss中排除整个/ @ ckeditor文件夹-但我还没有弄清楚该怎么做。 任何人都知道是否可以使用laravel-mix-postcss-config软件包吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ckeditor5laravel-mixpostcsswebkitwebkitwebkit