Использование переменных SCSS в CSS-модулях

Question

У меня есть файл _color.scss, который состоит из 400 цветов в качестве переменных. И у меня есть 20 компонентов, которым нужны эти цветовые переменные в их стилях.

Я использую SCSS + CSS-модули для создания своих стилей. На данный момент я импортирую этот _color.scss в каждый компонент style.scss.

Пример:

component1.scss

@import "color.scss"; 

component2.scss

@import "color.scss"; 

component3.scss

@import "color.scss"; 

Ранее, когда я использовал автономный SCSS, я импортирую color.scss в свой index.scss и импортирую все остальные стили под ним. Таким образом, переменные будут доступны для всех компонентов.

Пример:

//index.scss 
@import "color.scss"; 
@import "component1.scss"; 
@import "component2.scss"; 
@import "component3.scss"; 

Теперь все переменные под _color.scss будут доступны под component1.scss, component2.scss и component3.scss.

Есть ли способ сделать что-то похожее на это с CSS Modules + SCSS? Единственное место, чтобы объявить глобальные варибалы?

Answer 1

Способ, которым я пользуюсь сейчас, выглядит довольно чистым. Итак, я делюсь с ними всеми.

Использование sass-resources-loader

Это будет включать @import на все ваши файлы .scss делает переменные и Примеси доступные по всем scss файлов при использовании css modules.

webpack@2.x.x конфигурации

... 
    module: { 
     rules: [ 
     { 
      test: /\.scss$/, 
      loaders: [ 
      'style-loader', 
      'css-loader?modules&importLoaders=1&localIdentName=[path][name]__[local]__[hash:base64:10]', 
      'sass-loader', 
      'sass-resources-loader', 
      'import-glob-loader', 
      'postcss-loader', 
      ], 
     }, 
    }, 
    plugins: [ 
     new webpack.LoaderOptionsPlugin({ 
     options: { 
      postcss: [ 
      autoprefixer(), 
      ], 
      sassResources: [ 
      './app/constants/_style-variables.scss', //include your scss imports here 
      ], 
      context: path.resolve(__dirname, '../../') 
     } 
     }) 
    ] 
...