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

У меня есть _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? Единое место для объявления глобальных варибалов?


webpack reactjs css-modules sass react-css-modules
person Pranesh Ravi    schedule 23.11.2016    source источник

Ответы (1)


arrow_upward
5
arrow_downward

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

Используйте sass-resources-loader.

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

Конфигурация [email protected]

...
    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, '../../')
        }
      })
     ]
...
person Pranesh Ravi    schedule 24.11.2016