Экспортировать мои переменные CSS с моим модулем с помощью объединения?

У меня есть небольшой модуль, которым я использую несколько проектов. Он успешно экспортирует компоненты, но теперь я хотел бы, чтобы мои глобальные переменные стилей, например $contoso-primary: #ff0000, также были экспортированы, чтобы мы могли начать совместное использование переменных CSS в моем приложении-потребителе, например background-color: $contoso-primary. Я использую rollup.js, возможно ли это с этой библиотекой или с ее плагинами? Если да, то какой плагин я ищу? Я уже пробовал postcss, но, похоже, не работает, если я что-то не упускаю.


export default {
  input: 'src/index.js',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
      sourcemap: true
    },
    {
      file: pkg.module,
      format: 'es',
      sourcemap: true
    }
  ],
  plugins: [
    external(),
    postcss({
      extract: true
    }),
    url(),
    svgr(),
    babel({
      exclude: 'node_modules/**'
    }),
    resolve(),
    commonjs()
  ],
  onwarn(warning, warn) {
    if (
      warning.code === 'CIRCULAR_DEPENDENCY'
      && warning.importer.indexOf('node_modules/semantic-ui-react') > -1
    ) return;
    warn(warning);
  }
};

мой scss файл с моими варами выглядит примерно так:

$primary: #177757,
$secondary: #D50000

а в проекте-потребителе я хотел бы сослаться на них в своих scss файлах, например:

.button {
  background: $primary
}

Я не могу поместить .css файл в свою папку dist, а документация по rollup-plugin-postcss немного проста.


sass rollupjs
person David Lozzi    schedule 14.11.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

postcss-simple-var этот плагин сможет использовать sass-подобные переменные.

plugins:  [
      postcss({
        plugins: [
          simplevars()
        ],
      extensions: [ '.css' ],
    }),
    ...
  ]

для получения дополнительной информации прочтите эту статью.

person Sunil Kashyap    schedule 15.11.2019
comment
не работает, используя код так же, как и вы. Я добавил больше контекста выше, я думаю, что может сыграть свою роль. Спасибо! - person David Lozzi; 22.11.2019

arrow_upward
0
arrow_downward

Я смог выполнить эту работу, продублировав объявления переменных как в postcss.config.js, так и в rollup.config.js

Конфигурация накопительного пакета:

import postcss from "rollup-plugin-postcss";
import postcssSimpleVars from "postcss-simple-vars";
const variables = require("./pathTo/variableConfig.js");
...
const config = {
...
plugins: [
  postcss({
    postcssSimpleVars({
      variables: function () {
         return variables;
      }
    }),
  })
]

Конфигурация postCSS:

const variables = require("./variableConfig.js");

plugins: [
 ...
  require("postcss-simple-vars")({
    variables: variables
  })
]

variableConfig.js:

const baseDir = "../src/utils/constants";
const { COLORS } = require(`${baseDir}/colors`);
const { MQ } = require(`${baseDir}/mediaQueries`);
const { BREAKPOINTS } = require(`${baseDir}/breakpoints`);

const cssVars = Object.assign(COLORS, MQ, BREAKPOINTS);

module.exports = cssVars;
person johnjohn    schedule 22.10.2020