Как импортировать переменные JavaScript в настройку sass sass? ⇐ CSS

[Anonymous]

Я использую Vite для компиляции активов для моей пользовательской темы WordPress. Проблема в том, что мои локальные домены разработки используют .test tld вместо домена .com . Если у меня есть URL-адреса с жестким кодом в typography.scss , мне приходится вручную менять их каждый раз, когда я переключается между локальными и производственными средами. Я хочу использовать эту переменную, чтобы динамически установить URL -адреса в typography.scss , но независимо от того, что я пробую, она не работает.
ошибка:

Код: Выделить всё

vite build
vite v6.0.3 building for production...
✓ 0 modules transformed.
x Build failed in 593ms
error during build:
[vite:css] [sass] Undefined variable.
╷
5 │     src: url('#{$app-url}/wp-content/themes/custom_theme/static/fonts/pnr.woff2') format('woff2'),
│                 ^^^^^^^^
╵
src/scss/typography.scss 5:17     @use
src/scss/theme-frontend.scss 8:1  root stylesheet
file: /home/user/www/example.test/wp-content/themes/custom_theme/src/scss/theme-frontend.scss

[sass] Undefined variable.
╷
5 │     src: url('#{$app-url}/wp-content/themes/custom_theme/static/fonts/pnr.woff2') format('woff2'),
│                 ^^^^^^^^
╵
src/scss/typography.scss 5:17     @use
src/scss/theme-frontend.scss 8:1  root stylesheet

Error: Undefined variable.
╷
5 │     src: url('#{$app-url}/wp-content/themes/custom_theme/static/fonts/pnr.woff2') format('woff2'),
│                 ^^^^^^^^
╵
< /code>
 variables.scss
$app-url: 'https://example.com';

Если я импортирую переменные непосредственно в SCS, они работают, но это не помогает моей проблеме без @USE 'переменных' как *; Я получаю ошибку выше
h2>-типография.@use 'variables' as *;
@font-face {
font-family: 'PNR';
src: url('#{$app-url}/wp-content/themes/theme/static/fonts/pnr.woff2') format('woff2'),
url('#{$app-url}/wp-content/themes/theme/static/fonts/pnr.woff') format('woff'),
url('#{$app-url}/wp-content/themes/theme/static/fonts/pnr.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
< /code>
Если я попробую импортировать одну строку с переменной в каждый файл, он не работает, и бросает аналогично вышеуказанной ошибке < /p>
css: {
preprocessorOptions: {
scss: {
additionalData: `$app-url: ${appUrl};`,
},
},
}
< /code>
Вот моя текущая конфигурация Vite. Любые предложения будут высоко оценены.import { defineConfig } from "vite"
import laravel from "laravel-vite-plugin"
import path from "path"

export default defineConfig(({ mode }) => {
const appUrl = "https://example.com"

return {
plugins: [
laravel({
input: [
"src/scss/theme-frontend.scss",
],
publicDirectory: "static/build",
}),
],
build: {
outDir: "./static/build",
rollupOptions: {
output: {
globals: {
jquery: "window.$",
},
},
},
},
server: {
host: "0.0.0.0",
https: {
key: "./ssl/localhost.key",
cert: "./ssl/localhost.crt",
},
hmr: {
host: "localhost"
},
},
resolve: {
alias: {
"~": path.resolve(__dirname, "src"),
"@scss": path.resolve(__dirname, "src/scss"),
},
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "${ path.resolve(__dirname, 'src/scss/variables.scss') }" as *;`,
},
},
},
}
}
)
< /code>
Вопрос, обсуждаемый здесь, как использовать глобальные переменные SASS от других компонентов в Vite-vue3, также не полезен, так как он предполагает использование @Import, что устарело и вызывает ошибки при размещении выше оператора @USE. Я не смог найти никаких плагинов, которые решают эту проблему. Кроме того, пост не объясняет, как импортировать переменные JavaScript - оно охватывает только обмен переменными SASS.


Подробнее здесь: https://stackoverflow.com/questions/796 ... sass-setup