Разрешение глобальных переменных SCSS с помощью Webpack

У меня возникли проблемы с разрешением моего файла глобальных переменных scss. Я пытаюсь добавить файл цвета scss, который я могу просто импортировать глобально, где это необходимо.

Конфигурация веб-пакета 1:

  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: 'style' +
        '!css' +
          '?sourceMap' +
          '&modules' +
          '&importLoaders=1' +
          '&localIdentName=[local]__[hash:base64:4]' +
        '!sass' +
          '?sourceMap'
      }
    ]
  },
  sassLoader: {
    includePaths: [
        path.resolve(__dirname, '../src/<path to stylesheets>/themes')
      ]
  },

Sass-файл

@import "colors";

.add {
  background: $button-inactive-state;
}

Код ошибки (некоторые личные вещи отредактированы)

./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[local]__[hash:base64:4]!./~/sass-loader/lib/loader.js?sourceMap!./src/<path to file>/toggle-item-button/item-icon.scss
Module build failed: 
@import "colors";
^
      File to import not found or unreadable: colors
Parent style sheet: stdin
      in /Users/<me>/Checkouts/<my project>/src/<path to file>/toggle-item-button/item-icon.scss (line 1, column 1)
Error: 
@import "colors";
^
      File to import not found or unreadable: colors
Parent style sheet: stdin
      in /Users/<me>/Checkouts/<my project>/src/<path to file>/toggle-item-button/item-icon.scss (line 1, column 1)
  at options.error (/Users/<me>/Checkouts/<my project>/node_modules/node-sass/lib/index.js:286:26)

 @ ./src/<path to file>/toggle-item-button/item-icon.scss 4:14-229

webpack css-modules sass-loader global-variables
person Matt Coady    schedule 15.05.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я нашел рабочее решение:

Конфигурация веб-пакета:

  resolve: {
    alias: {
      themes: path.resolve(__dirname, '../src/<path to stylesheets>/themes')
    },
  },

СКСС

@import "~themes/colors";
person Matt Coady    schedule 15.05.2017