farm-fe / farm

Extremely fast Vite-compatible web build tool written in Rust
https://farmfe.org
MIT License
5k stars 167 forks source link

@farmfe/plugin-sass@1.0.2 can not resolve $url #1094

Open Weeken opened 7 months ago

Weeken commented 7 months ago

Steps to reproduce

src/styles/scss/global.scss

@mixin background-image-mixin($url, $position, $size, $repeat: no-repeat) {
    background-image: url($url);
    background-repeat: $repeat;
    background-position: $position;
    background-size: $size;
}

farm.config.ts

plugins: [
            [
                '@farmfe/plugin-sass',
                {
                    additionalData: `@use "@/style/common.scss" as *;`
                }
            ]
        ]

What is expected?

build success

What is actually happening?

  src\components\navBar\NavBar.vue 1:1  root stylesheet
Transform `src/components/toast/Toast.vue?vue&type=style&index=0&scoped=70b341f4&lang.scss` failed.
Error: Transform `C:/Users/T/Desktop/nabd-h5/src/components/toast/Toast.vue` failed.
Error: Error: can not resolve $url from C:\Users\T\Desktop\nabd-h5\src\style\common.scss
  ╷
1 │ @use "@/style/common.scss" as *;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12400
    Memory: 1.66 GB / 15.75 GB
  Binaries:
    Node: 18.19.0 - ~\AppData\Local\fnm_multishells\10472_1711683538335\node.EXE
    Yarn: 1.22.21 - ~\AppData\Local\fnm_multishells\10472_1711683538335\yarn.CMD
    npm: 10.2.3 - ~\AppData\Local\fnm_multishells\10472_1711683538335\npm.CMD
    pnpm: 8.15.3 - ~\AppData\Local\fnm_multishells\10472_1711683538335\pnpm.CMD
  Browsers:
    Edge: Chromium (122.0.2365.92)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @farmfe/core: ^1.0.8 => 1.0.8

Any additional comments?

No response

wre232114 commented 7 months ago

We'll fix it soon.

shulandmimi commented 7 months ago

This issue has been resolved in the new version of npm sass-embedded. However, due to the long-standing lack of updates to the sass-embedded we use in Rust, we are unable to utilize the new version of npm sass-embedded. As a result, this problem cannot currently be fixed in @farmfe/plugin-sass.

Fortunately, you can use @farmfe/js-plugin-sass as a replacement.

import sass from '@farmfe/js-plugin-sass';

export default {
    // ..
    plugins: [
        // ..
        sass({ legacy: true, additionalData: `@use "@/style/common.scss" as *;` })
    ]
}
Weeken commented 7 months ago

ok