Roots Discourse

@apply is not supported within nested at-rules like @include. You can fix this by un-nesting @include

when I run yarn dev I get the following error

āœ˜ Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(155:7) ./resources/styles/partials/_base.scss @apply is not supported within nested at-rules like @include. You can fix this by un-nesting @include.

  153 |     @apply flex flex-col w-full p-8;
  154 |     @include respond(md) {
> 155 |       @apply flex-row p-0;
      |       ^
  156 |     }

Also, I am using SCSS instead of CSS and updated the default resources/styles/app.css as below

@import "lib/_mixins.scss";
@import 'tailwindcss/base';
@import "partials/_base.scss";
@import "partials/_form_fields.scss";
@import "partials/_buttons.scss";
@import "partials/_animations.scss";
@import 'tailwindcss/components';
@import "partials/_components.scss";
@import 'tailwindcss/utilities';

My package.json file

"devDependencies": {
    "@roots/bud": "^5.0.0",
    "@roots/sage": "^5.0.0",
    "@wordpress/browserslist-config": "4.1.0",
    "autoprefixer": "^10.4.1",
    "babel-eslint": "^10.1.0",
    "eslint": "8.6.0",
    "postcss": "8.4.5",
    "postcss-import": "14.0.2",
    "postcss-nested": "5.0.6",
    "postcss-preset-env": "7.1.0",
    "postcss-scss": "^4.0.2",
    "prettier": "2.5.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "tailwindcss": "^3.0.9"
  },
  "dependencies": {
    "stylelint-scss": "^4.1.0"
  }

Its a relatively fresh installation of Sage 10 and I am using tailwindcss. Is there any bud-nesting plugin or any other built-in which handles the nesting of rules with tailwindcss? Any help would be greatly appreciated.

Thank You.

Howdy! Have you seen this page on the Tailwind docs about nesting?

Hello Ben, yes I checked the documentation on tailwind but there is no postcss.config.js file in sage 10. Can you tell me where I can setup the nesting plugin?

:eyes: this should help get you pointed in the right spot: How to add PostCSS plugins to Bud?

this is my bud.config.js file

/**
 * @typedef {import('@roots/bud').Bud} Bud
 *
 * @param {Bud} config
 */

module.exports = async (config) =>
  config
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ['scripts/app.js', 'styles/app.css'],
      editor: ['scripts/editor.js', 'styles/editor.css'],
    })

    /**
     * Add postcss plugin with bud
     */
    .tap(bud => {
      bud.postcss.setPlugin('postcss-nested', [
        require.resolve('postcss-nested'), // the plugin module path
        {}, // options
      ])
    })


    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets(['resources/images'])

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch([
      'tailwind.config.js',
      'resources/views/**/*.blade.php',
      'app/View/**/*.php',
    ])

    /**
     * Target URL to be proxied by the dev server.
     *
     * This is your local dev server.
     */
    .proxy('http://website.local');

Tried running yarn bud clean and then yarn dev still getting the same error. Any suggestions here?
One more question, I dont see postcss-import plugin being set up anywhere in bud but my import statements in scss files are working fine. Is that included by default?

solved my issue by adding @roots/bud-sass and sass to my package.json devDependencies.

1 Like