how to exclude files with postcss 8

Question

I am using tailwindcss with postcss8 (it comes with tailwind) and there is a problem trying to parse a css from a node_modules package.

is there a way to exclude these css files from being processed by postcss?

this is the error I get:

ERROR in ./node_modules/@fullcalendar/common/main.css (./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./node_modules/@fullcalendar/common/main.css)
Module build failed (from ./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 45
    at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/@fullcalendar/common/main.css:633:3
    at Parser.error (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:162:20)
    at Parser.parseTokens (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at parse (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-custom-properties/index.cjs.js:47:30)
    at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-custom-properties/index.cjs.js:333:24
    at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:72:18
    at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:55:18
    at Rule.each (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:41:16)
    at Rule.walk (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:52:17)
    at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:60:24
    at Root.each (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:41:16)
    at Root.walk (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:52:17)
    at Root.walkDecls (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:70:19)
    at transformProperties (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-custom-properties/index.cjs.js:330:8)
 @ ./node_modules/@fullcalendar/common/main.css 4:14-191
 @ ./node_modules/@fullcalendar/common/main.js
 @ ./node_modules/@fullcalendar/timegrid/main.js
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/global/Schedule.vue?vue&type=script&lang=js&
 @ ./components/global/Schedule.vue?vue&type=script&lang=js&
 @ ./components/global/Schedule.vue
 @ ./node_modules/.cache/nuxt/components/index.js
 @ ./node_modules/.cache/nuxt/components/plugin.js
 @ ./node_modules/.cache/nuxt/index.js
 @ ./node_modules/.cache/nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./node_modules/.cache/nuxt/client.js

user_8276421 · Answer

I also had this issue. However, this is how I solve it.

Add the following to your nuxt.config.js file.

  build: {
    postcss: {
      plugins: {
        /**
         * do not remove the cssnano key.
         * (https://github.com/fullcalendar/fullcalendar/issues/5503)
         */
        cssnano: {
          preset: [
            'default',
            {
              calc: false,
            },
          ],
        },
      },
    },
    transpile: [
      /@fullcalendar.*/, // always need for fullcalenar
    ],
  },

To learn more about it, read this processing css with postcss, calc/var problems.

I hope this helps you. If you have solved this, please share your solution so that the community can learn from it.

how to exclude files with postcss 8

1 Answers