CSS Модуль входит в комплект, но не упоминается с помощью TSDX, который использует под капотом Rollup - PullRequest
Новая
       14

CSS Модуль входит в комплект, но не упоминается с помощью TSDX, который использует под капотом Rollup

0 голосов
/ 06 августа 2020

Я создал библиотеку React, используя TSDX → https://github.com/deadcoder0904/react-typical

Он использует CSS модули и прикрепляет стили к библиотеке React.

Пакет правильно выводит файл CSS в папку dist/, но на самом деле никогда не ссылается на него должным образом.

Это приводит к тому, что мои стили вообще не отображаются.

Вот мой полный tsdx.config.js : 

const postcss = require('rollup-plugin-postcss');
const { terser } = require('rollup-plugin-terser');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        modules: true,
        plugins: [
          autoprefixer(),
          cssnano({
            preset: 'default',
          }),
        ],
        inject: false,
        // only write out CSS for the first bundle (avoids pointless extra files):
        extract: !!options.writeMeta,
        minimize: true,
      }),
      terser()
    );
    return config;
  },
};

Если вы видите папку dist/ в https://yarnpkg.com/package/@deadcoder0904 / response-typing? Files , то вы заметите, что в ней есть index.js файл, но нет t вообще ссылаться на файл .css.

То же самое с каждым .js файлом в папке dist/. Нет ссылок на файлы .css файл и код CSS вообще не связан, поэтому он просто не использует стили.

Как решить эту проблему?

Ответы [ 2 ]

2 голосов
/ 08 августа 2020

Насколько я понимаю, обычно библиотека обычно вводит компоненты и стили отдельно и сообщает пользователям в документе, хотят ли они использовать стиль по умолчанию, а затем позволяет импортировать css файл, например: 

import ReactTypical from "react-typical"
import "react-typical/dist/react-typical.cjs.development.css"

Это то же самое, что и ваш случай, я думаю

Или вы бы установили свой стиль по умолчанию, не запрашивая их импорт вручную, что означает, что вам нужно уточнить свою конфигурацию, установив inject: true, он будет импортировать ваш css context в ваш js файл, затем выполните во время выполнения, чтобы добавить сценарий в <head /> документа. Тогда ваша изменяющаяся конфигурация будет выглядеть так: 

postcss({
  modules: true,
  plugins: [
    autoprefixer(),
    cssnano({
      preset: 'default',
    }),
  ],
  // Append to <head /> as code running
  inject: true,
  // Keep it as false since we don't extract to css file anymore
  extract: false,
})
1 голос
/ 09 августа 2020

Для работы со сборником рассказов добавьте следующие правила css в конфигурацию webpack сборника рассказов ./story/main.js: 

// Remove the existing css rule
config.module.rules = config.module.rules.filter(
  f => f.test.toString() !== '/\\.css$/'
);

config.module.rules.push(
  {
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader',
    ],
    include: path.resolve(__dirname, "../src"),
  }
)

Но вы пропустите их в зависимости от вашего пакета, просто не забудьте добавить их : 

npm i -D style-loader css-loader
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...