Wrap @import to ignore

[p3yman]

Hi, I want to ignore a package that is importing from node_modules. What can i do about it? I tried 2 ways: First one:

/*rtl:begin:ignore*/
@import '~leaflet/dist/leaflet.css';
/*rtl:begin:ignore*/

And second one:

@import '~@assets/css/begin-rtl-ignore.css';
@import '~leaflet/dist/leaflet.css';
@import '~@assets/css/end-rtl-ignore.css';

But neither works! any solution?

[FaridAghili]

Looking forward to it

[jd-solanki]

+1

[vkalinichev]

@peyman3d @FaridAghili @jd-0001

Is problem still actual?

I add test for it, and it passes

[FaridAghili]

@vkalinichev I've tested it right now.

app.scss:

@import '~bootstrap/dist/css/bootstrap.css';

/*rtl:begin:ignore*/
@import '~owl.carousel/dist/assets/owl.carousel.css';
/*rtl:end:ignore*/

// more codes ...

It's expected that OwlCarousel be ignored here (Cause it supports RTL by default and doesn't need to be RTLed), but it's still processed and RTLed.

laravel-mix: 5.0.1 postcss-rtl: 1.7.0

[vkalinichev]

Hmm... Can you provide your postcss config? Maybe another plugins strips out the ignore-directives or something like that?

[FaridAghili]

I'm using laravel-mix in a Laravel project.

webpack.mix.js file:

const mix = require('laravel-mix');

mix.sass('resources/sass/app.scss', 'public/css')
    .options({
        postCss: [
            require('postcss-rtl')({
                onlyDirection: 'rtl'
            })
        ]
    });

package.json file:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "bootstrap": "^4.4.1",
        "cross-env": "^7.0",
        "jquery": "^3.4.1",
        "laravel-mix": "^5.0.1",
        "owl.carousel": "^2.3.4",
        "popper.js": "^1.16.1",
        "postcss-rtl": "^1.7.0",
        "resolve-url-loader": "^3.1.1",
        "sass": "^1.25.0",
        "sass-loader": "^8.0.2",
        "vue-template-compiler": "^2.6.11"
    }
}

[owen-soak]

Experiencing the same issue with Owl Carousel /*rtl:begin:ignore*/ @import '~owl.carousel/dist/assets/owl.carousel.css'; /*rtl:end:ignore*/

[miladmeidanshahi]

the same issue I can't ignore CSS files

[mhrabiee]

Probably is a Webpack issue in production mode. (When comments are striped). Fixed via /* ! */

/*! rtl:begin:ignore */
@import '~leaflet/dist/leaflet.css';
/*! rtl:end:ignore */

Tested in Nuxt 2.12 & Laravel Mix 4

[miladmeidanshahi]

@mhrabiee does't work on quasar framework :(

[FaridAghili]

@mhrabiee @miladmeidanshahi doesn't work on laravel-mix 5 neither.

also tried this with no success.

[hbsoftco]

@mhrabiee How did you import postcss-rtl at nuxt.config.js? Please share it.

dadash kheili giram :))

[mhrabiee]

@mhrabiee How did you import postcss-rtl at nuxt.config.js? Please share it.

dadash kheili giram :))

@hbsoftco

npm i postcss-rtl --save-dev

nuxt.config.js

  build: {
    /*
     ** You can extend webpack config here
     */
    postcss: {
      plugins: {
        'postcss-rtl': {}
      }
    }
  }

[mustafa-online]

Any solution for this on Quasar? 😢

[miladmeidanshahi]

In new Quasar:

If you have been using quasar.conf.js > build > rtl in the form of an Object, then you must match these options now, since we've switched from the unmaintained postcss-rtl to postcss-rtlcss package.