Загрузчик Webpack Sass не распознает файл глобальных переменных

у меня есть этот каталог sass:

- _vars.scss
- main.scss

/ / vars.scss

$base-container: 1400px;

//main.scss

@import './vars';

в другом файле js у меня есть:

require('./some-module-sass-file');

/ / some-module-Sass-file.scss

.container {
  width: $base-container;
}

проблема в том, что у меня есть глобальные переменные в файл vars и some-module-Sass-file не распознать их и бросить ошибку:

undefined variable $base-container
7
javascript sass webpack

3 ответов

вы должны импортировать vars файл в каждый частичный Sass, который использует эти переменные, потому что каждый частичный компилируется сам по себе; ни один из файлов не будет "знать" о других, если вы специально не импортируете их.

Если вы не хотите вводить imports в каждом файле Sass вы можете посмотреть багаж-погрузчик, который автоматически добавит их для вас.

6

короткий ответ:

https://github.com/shakacode/sass-resources-loader

ответ:

Sass-resources-loader позволяет использовать переменные, миксины и т. д. В каждом требуемом файле sass.

таким образом, вы можете иметь свои переменные в vars.scss:

<!-- language: lang-css -->

$main: #073288; 
$secondary: #F6A906;

<!-- end snippet -->

и затем использовать их как обычно:

<!-- language: lang-css -->

.my-component {
    background-color: $main;
    color: $secondary;
}

<!-- end snippet -->

все, что вам нужно сделать, это

  1. установить Sass-ресурсы-загрузчик:

    npm установите Sass-resources-loader --save-dev

  2. и настроить webpack.config:

    { погрузчик: 'Сасс-ресурсов-погрузчик', опции: { ресурсы.' :/путь/к/Варс.СКС' }, },

вот пример github 

<!-- language: lang-js -->

module: {
  rules: [
    // Apply loader
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader',
        {
          loader: 'sass-resources-loader',
          options: {
            resources: ['./path/to/vars.scss', './path/to/mixins.scss']
          },
        },
      ],
    },
  ],
}

<!-- end snippet -->
2

без использования Sass-resources-loader:

спасибо @Arseniy-II для того, чтобы помочь мне получить этот ответ, в сочетании с этой нитью: https://github.com/webpack-contrib/sass-loader/issues/218

используя параметры загрузчика в правилах модуля webpack, вы можете назначить свойство данных Sass-loader, затем вы сможете использовать все функции sass, как ожидалось:

module: {
  rules: [
    // Apply loader
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            data: '@import "path/to/global.scss";',
            includePaths:[__dirname, 'src']
          },
        },
      ],
    },
  ],
}
1