Vue, BalmUI and SCSS - can't find "@material/feature-targeting/feature-targeting"

[Explie]

Development Relevant Information:

• BalmUI version: "^9.40.0"
• Vue version: "^3.0.0"
• Sass version: "^1.48.0"
• sass-loader version: "^8.0.2"

Description:

I've setup a simple vue cli project with BalmUI support and it works fine. Afterwards I tried overwriting some material style in SCSS as described in the docs but I am always running in an Sass Import Error for @material/feature-targeting/feature-targeting

Syntax Error: SassError: Can't find stylesheet to import.
   ╷
29 │ @use '@material/feature-targeting/feature-targeting';
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules\@material\theme\_theme.scss 29:1  @forward
  node_modules\@material\theme\_index.scss 17:1  @use
  src\styles\_vendor.scss 3:1                    @use
  E:\Desktop\AssetInv\frontend\src\styles\main.scss 3:1                                      root stylesheet

My vendor.scss looks like the following:

@use '@material/theme' as theme-variables with (
  $primary: var.$primaryColor,
  $secondary: #018786,
);

//!* import BalmUI styles *!
@use 'balm-ui/dist/balm-ui';

.mdc-data-table__header-cell{
  font-weight: 700
}

.mdc-fab {
  box-shadow: none !important;
}

What am I missing here? I do understand it has a problem with importing @use '@material/feature-targeting/feature-targeting'; in the node_modules\@material\theme\_theme.scss but why is it failing. All other imports seem to work fine. Also the problem was non existent when bootstrapping with BalmJS but i couldn't figure out what BalmJS does different here.

Thanks!

[elf-mouse]

Hi @Explie ,

I assume you are using pnpm install? Please use yarn or npm first!

If you are using pnpm, you need configure the .npmrc file for BalmUI

• Hoisting everything to the the root of node_modules:

  shamefully-hoist=true

• Or, hoisting only packages that match a pattern:

  public-hoist-pattern[]="*deepmerge*"
  public-hoist-pattern[]="*flatpickr*"
  public-hoist-pattern[]="*material-components-web*"
  public-hoist-pattern[]="@material/*"
  public-hoist-pattern[]="*quill*"

Documentation has been updated, thank you :)

[Explie]

Hi @elf-mouse

Thanks for the fast response. I am actually using npm right now.

So what I did to reproduce was:

1. Setup a new Vue project with vue-cli:

   Vue CLI v4.5.15
   ? Please pick a preset: Manually select features
   ? Check the features needed for your project: Choose Vue version, Babel, Router, CSS Pre-processors, Linter
   ? Choose a version of Vue.js that you want to start the project with 3.x                             
   ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes           
   ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
   ? Pick a linter / formatter config: Standard                                                          
   ? Pick additional lint features: Lint on save                                 
   ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

2. cd my-project
3. npm install --save balm-ui@next
4. Edit vue.config.js

   module.exports = {
   runtimeCompiler: true,
   configureWebpack: {
   resolve: {
     alias: {
       'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.js',
       'balm-ui-css': 'balm-ui/dist/balm-ui.css'
     }
   }
   }
   };

5. Edit main.js

   
   import { createApp } from 'vue'
   import App from './App.vue'
   import router from './router'

import BalmUI from 'balm-ui' // Official Google Material Components import BalmUIPlus from 'balm-ui-plus'// BalmJS Team Material Components import 'balm-ui-css' import './styles/vendor.scss'

const app = createApp(App)

app.use(router) app.use(BalmUI) app.use(BalmUIPlus)

app.mount('#app')

6, Create a new file: `src/styles/vendor.scss`

@use '@material/theme' as theme-variables with ( $primary: #6200ee, $secondary: #018786 );

@use 'balm-ui/dist/balm-ui';

7. Run the project: `npm run serve`

[elf-mouse]

Hi @Explie , Thanks for your details

This problem is due to the lack of some common compatible configurations in your manually built scaffold, such as the options of sass-loader. so you need add sassOptions

• vue.config.js

  module.exports = {
  // ...
  css: {
    loaderOptions: {
      sass: {
        sassOptions: {
          includePaths: ["node_modules"],
        },
      },
    },
  },
  };

And, if you choose sass entry, don't use css entry

• src/main.js

  // import 'balm-ui-css' // css entry
  import './styles/vendor.scss' // sass entry

Also, if you don't copy balm-ui/fonts to the project src folder, you need to additionally rewrite the sass variable for icon

• src/styles/vendor.scss

  @use 'balm-ui/components/icon' with (
  $font-path: '../../node_modules/balm-ui/fonts'
  );

Have a nice day! Thanks again :)

[Explie]

Hi @elf-mouse,

Works like a charm. Many thanks to you.

I already though I am missing an include of the node_modules folder but neither the Vue- nor the SASS Loader documentation were particularly helpful. In the end it was a webpack option...

Have a nice day and many thanks!