Can't import your module to my vue 3 project

[Gavrushuk]

I useed npm install @webpixels/css@latest bootstrap@latest --save-dev and after this imported this module to my scss file @import '@webpixels/css';

[Gavrushuk]

When I change import path from @import 'bootstrap/scss/functions'; to @import '~bootstrap/scss/functions'; in all files, it's work

[extrabright]

Are you using Webpack to compile the Sass files?

Make sure you add node_modules to includePaths, in order to point to the right directory: https://webpixels.io/docs/css/1.0/build-tools

[Gavrushuk]

@webpixels @alexisenache What dependencies I had in package.json before install @webpixels/css:

"main": "background.js",
  "dependencies": {
    "@stomp/stompjs": "^6.1.0",
    "axios": "0.19.2",
    "bootstrap": "^4.6.0",
    "core-js": "^3.15.2",
    "cron-time-generator": "^1.2.0",
    "js-base64": "^3.6.1",
    "mitt": "^3.0.0",
    "moment-timezone": "^0.5.33",
    "popper.js": "^1.16.1",
    "qrcode.vue": "^3.2.2",
    "randomcolor": "^0.6.2",
    "recordrtc": "^5.6.2",
    "rect-scaler": "^1.0.0",
    "register-service-worker": "^1.7.1",
    "rxjs": "^6.6.7",
    "timezones-list": "^3.0.1",
    "uuid": "^8.3.2",
    "vanillatoasts": "^1.4.0",
    "vee-validate": "^4.4.5",
    "vue": "^3.1.4",
    "vue-audio-visual": "^2.2.2",
    "vue-router": "^4.0.10",
    "vue-toastification": "^2.0.0-rc.1",
    "vue3-datepicker": "^0.2.5",
    "vue3-popper": "^1.2.0",
    "vue3-select2-component": "^0.1.7",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@types/uuid": "^8.3.1",
    "@vue/cli": "^4.5.13",
    "@vue/cli-plugin-babel": "^4.5.13",
    "@vue/cli-plugin-pwa": "^4.5.13",
    "@vue/cli-plugin-router": "^4.5.13",
    "@vue/cli-plugin-vuex": "^4.5.13",
    "@vue/cli-service": "^4.5.13",
    "@vue/compiler-sfc": "^3.1.4",
    "aws-sdk": "^2.939.0",
    "electron": "^9.4.4",
    "electron-devtools-installer": "^3.2.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "slack-node": "^0.1.8",
    "ts-node": "^9.1.1",
    "typescript": "^4.3.5",
    "vue-cli-plugin-electron-builder": "^2.0.0",
    "vue-loader-v16": "^16.0.0-beta.5.4"
  }

What I did next, I removed Bootstrap 4 and installed @webpixels/css and Bootstrap 5 latest versions npm install @webpixels/css@latest bootstrap@latest --save-dev

Then I installed sass, sass-loader, postcss-loader, css-loader npm i sass sass-loader postcss-loader css-loader

Then I removed my node_modules and package-lock.json and again install all modules npm i

Then imported @webpixels/css in my main styles file

@import "./variables"

@import "~bootstrap/scss/bootstrap"
@import "~bootstrap/scss/bootstrap-grid"
@import "~vanillatoasts/vanillatoasts.css"

@import "@webpixels/css"

@import "./paddings"
@import "./typography"
@import "./backgrounds"
@import "./inputs"
@import "./buttons"
@import "./cards"
@import "./animations"
@import "./layout"
@import "./notifications"
@import "./dropdown"
@import "./toasts"
@import "./modals"

Then when I try to run my project I got this error

After that, I tried added chainWebpack in my vue.config.js

chainWebpack: config => {
    config.module
      .rule('scss')
      .test(/\.(scss)$/)
      .use('style-loader')
        .loader('style-loader')
        .end()
      .use('css-loader')
        .loader('css-loader')
        .end()
      .use('postcss-loader')
        .loader('postcss-loader')
        .end()
      .use('sass-loader')
        .loader('sass-loader')
        .end()
  }

And got the same error

My dependecies list in package,js after installed modules

"main": "background.js",
  "dependencies": {
    "@stomp/stompjs": "^6.1.0",
    "axios": "0.19.2",
    "core-js": "^3.15.2",
    "cron-time-generator": "^1.2.0",
    "css-loader": "^6.3.0",
    "js-base64": "^3.6.1",
    "mitt": "^3.0.0",
    "moment-timezone": "^0.5.33",
    "popper.js": "^1.16.1",
    "postcss-loader": "^6.1.1",
    "qrcode.vue": "^3.2.2",
    "randomcolor": "^0.6.2",
    "recordrtc": "^5.6.2",
    "rect-scaler": "^1.0.0",
    "register-service-worker": "^1.7.1",
    "rxjs": "^6.6.7",
    "sass": "^1.42.1",
    "timezones-list": "^3.0.1",
    "uuid": "^8.3.2",
    "vanillatoasts": "^1.4.0",
    "vee-validate": "^4.4.5",
    "vue": "^3.1.4",
    "vue-audio-visual": "^2.2.2",
    "vue-router": "^4.0.10",
    "vue-toastification": "^2.0.0-rc.1",
    "vue3-datepicker": "^0.2.5",
    "vue3-popper": "^1.2.0",
    "vue3-select2-component": "^0.1.7",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@types/uuid": "^8.3.1",
    "@vue/cli": "^4.5.13",
    "@vue/cli-plugin-babel": "^4.5.13",
    "@vue/cli-plugin-pwa": "^4.5.13",
    "@vue/cli-plugin-router": "^4.5.13",
    "@vue/cli-plugin-vuex": "^4.5.13",
    "@vue/cli-service": "^4.5.13",
    "@vue/compiler-sfc": "^3.1.4",
    "@webpixels/css": "^1.1.5",
    "aws-sdk": "^2.939.0",
    "bootstrap": "^5.1.1",
    "electron": "^9.4.4",
    "electron-devtools-installer": "^3.2.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^10",
    "slack-node": "^0.1.8",
    "ts-node": "^9.1.1",
    "typescript": "^4.3.5",
    "vue-cli-plugin-electron-builder": "^2.0.0",
    "vue-loader-v16": "^16.0.0-beta.5.4"
  }

[Gavrushuk]

Seem like problem with sass-loader

[extrabright]

That's what I thought. Sass made some core changes that might affect the compiling process. Make sure you use the latest sass and sass-loader and try again.

[extrabright]

Also, you should install sass instead of node-sass. Even though Bootstrap still supports that, our CSS framework doesn't:

"sass": "^1.35.1",
"sass-loader": "^8.0.2",

[Gavrushuk]

@alexisenache removed node-sass and install sass and sass-loader latest version
npm i sass@latest
npm i sass-loader@latest

"sass": "^1.42.1",
"sass-loader": "^12.1.0",

And got this issue:

[Gavrushuk]

@alexisenache I downgrade sass-loader to 10 version, and it's work

"sass": "^1.42.1",
"sass-loader": "^10",

[extrabright]

Great. I will make some tests and see what causes the issue anyway 👍