Далее. JS: Использование переменных SASS из глобального scss - PullRequest
Новая
       44

Далее. JS: Использование переменных SASS из глобального scss

1 голос
/ 31 марта 2020

У меня есть приложение Next. js с файлом main.scss global css, импортированным в файл pages/_app.js.

_app. js

import '../global-styles/main.scss'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Стили из этого файла работают.

У меня также есть некоторые модульные s css файлы, прикрепленные к компонентам с использованием [component] .module.s css.

Я записал переменную в свой файл variables.scss, один из файлов которого я @import в main.scss,

variables.s css

$mobile: 750px;

main.s css

@import './fonts.scss';
@import './variables.scss';
@import './global.scss';

Однако, когда я пытаюсь использовать эту переменную в одном модульном css, я получаю сообщение об ошибке 

./module-styles/navbar.module.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-3-1!./node_modules/postcss-loader/src??__nextjs_postcss!./node_modules/resolve-url-loader??ref--5-oneOf-3-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-3-4!./module-styles/navbar.module.scss)
SassError: Undefined variable: "$mobile".
        on line 19 of /Users/Parv/Documents/reactx/module-styles/navbar.module.scss
>>         @media (max-width: $mobile) {

   ---------------------------^

Мой вопрос: почему нет? t мои глобальные переменные, которые я объявляю в моем main.s css сквозном?

Ответы [ 2 ]

0 голосов
/ 02 апреля 2020

Вы можете следить за последним Следующим. js сообщение в блоге для поддержки Sass Встроенная поддержка Sass для глобальных стилей

Чтобы начать использовать глобальный Sass импорт в вашем приложении, установите sass: 

npm install sass

Затем импортируйте файл Sass в pages/_app.js.

0 голосов
/ 31 марта 2020

Это не связано с Next. js, но с тем, как sass-loader работает. Каждый импорт файла s css из файла js обрабатывается как изолированный sass env, поэтому нет такой вещи, как "глобальные переменные".

Это поведение требует от вас импортируйте файл variables.scss из каждого файла s css, в котором используется одна из переменных.

Примечание . Важно, чтобы эти общие scss файлы (например, ваши * 1013) *) не будет содержать «обычный» css, потому что если это так, они будут дублироваться много раз (сумма импорта).

...