CSS-блоки просто получили открытый исходный код, и я хотел включить его в свое приложение React, продолжая использовать шаблонный веб-пакет CRA, потому что я хочу сохранить все остальные функциональные возможности.
Из того, что я понимаю, большая часть конфигурации просто добавляет еще один загрузчик babel с плагином css-block.
Так что вместо:
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
},
Выследуйте за ним с:
{
test: /\.[j|t]s(x?)$/,
exclude: /node_modules/,
use: [
{
loader: require.resolve('babel-loader'),
options: {
presets: [require.resolve("babel-preset-react-app")],
cacheDirectory: true,
compact: true,
}
},
// Run the css-blocks plugin in its own dedicated loader because the react-app preset
// steps on our transforms' feet. This way, we are guaranteed a clean pass before any
// other transforms are done.
{
loader: require.resolve('babel-loader'),
options: {
plugins: [
require("@css-blocks/jsx/dist/src/transformer/babel").makePlugin({ rewriter: CssBlockRewriter }),
],
cacheDirectory: true,
compact: true,
parserOpts: {
plugins: [
"jsx",
"doExpressions",
"objectRestSpread",
"decorators",
"classProperties",
]
}
}
},
Но я не могу за всю свою жизнь получить второй бит, чтобы что-то анализировать.Как будто его даже не существует, и на мои CSS-модули просто ссылаются внутри класса.Результат в конечном итоге выглядит так:
<div class="/src/test.css">
вместо
<div class="a b cD">
Если у кого-то есть указания на то, куда мне следует попытаться взглянуть, я был бы очень признателен!
PS. Для справки я приведу ссылки на документы ниже, поскольку она очень новая.
http://css -blocks.com /
https://github.com/linkedin/css-blocks/blob/master/packages/%40css-blocks/website/config/webpack.config.dev.js