twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170.47k stars 78.83k forks source link

how to compile rtl versions in vue framework? #33989

Closed kindslayer closed 3 years ago

kindslayer commented 3 years ago

Hi, I want to make an RTL version of CSS using RTLCSS and Vuejs but it doesn't work.

First of all, in my Vue project, I installed pre processor compilers npm install -D sass-loader node-sass. and append sass-loader config to my config like this.

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
}

This is my SCSS file.

@import './partials/aviny';
@import './partials/variables';

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';

@import "~bootstrap/scss/bootstrap";

html{
   background : red /* rtl:green */
}

and here is my index file

<style src="assets/scss/main.scss" scoped></style>
ffoodd commented 3 years ago

Hi there. We don't provide support for RTLCSS nor Vue, please head to their docs or try on StackOverflow.

RTLCSS is a postcss plugin so you should have a look to postcss and Vue.

BTW your path to fontawesome seems wrong: @fortawesome won't work.

Closing this since it isn't an issue with Bootstrap.