Глобальные переменные s css с reactjs и webpack

Question

Я работаю с reactjs и webpack, и я пытаюсь создать глобальные переменные sass, чтобы я мог использовать их в любом месте без импорта. Но мне не удалось, я добавил файл в веб-пакет, но всегда та же проблема. Даже другое решение на stackoverflow не работало со мной, может кто-нибудь помочь, пожалуйста?

вот мой индекс.s css:

@import "../public/scss/variables";
@import "../public/scss/mixin";

вот мои переменные. S css file:

$blueColor: #049DD6;
$darkBlueColor: #08536A;
$garyColor: #DFEFEF;
$darkGaryColor: #D5bbDE;
$pinkColor:#F05389;
$greenColor:#1DCD5A;
$redColor:#F60ELE;
$errorColor:#AAG601;

и вот простое login.s css где я пытался получить доступ к одной из моих переменных, но она показала мою переменную undefined:

.left-panel {
    background-color: $blueColor;
}

Спасибо за вашу помощь

Answer 1

Проверьте правильность параметров вашего загрузчика в правилах вашего модуля веб-пакета.

 {
            test: [/\.scss$/, /\.css/],
            loader: ExtractTextPlugin.extract(
              Object.assign(
                {
                  fallback: {
                    loader: require.resolve('style-loader')
                  },
                  use: [
                    {
                      loader: require.resolve('css-loader')
                    },
                    {
                      loader: require.resolve('sass-loader'),
                    },
                    {
                      loader: require.resolve('json-sass-mixin-loader')
                    },
                    {
                      loader: require.resolve('sass-resources-loader'),
                      options: {
                        resources: [
                          'path/to/mixins/*.scss',
                          'path/to/variables.scss']
                      }
                    },
                    {
                      loader: require.resolve('postcss-loader')
                    },
                  ],
                },
              )
            ),

          }

Answer 2

Попробуйте использовать абсолютный путь для массива options.resources . Пример:

resources: [
 path.resolve(__dirname, './src/styles/variables.scss')
]

или

resources: [
 './src/styles/variables.scss'
]

Оба должны работать

Answer 3

Вам необходимо выполнить импорт, используя расширение:

    @import "../public/scss/variables.scss";