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

sage
,
1

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.

2

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

3

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?

4

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

5

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?

6

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