У меня есть приложение React, созданное с помощью сценария create-react-app и обычного CSS (я не использую настраиваемую конфигурацию Webpack, поскольку я создал приложение с помощью сценария React), которое я создаю в контейнере Docker (узел ). Импортируется import './myComponent.css'.
Когда я строил и использовал пряжу start ("start:acceptance": "node -r dotenv/config ./node_modules/.bin/react-scripts start dotenv_config_path=config/acceptance.env") работал, как ожидалось. Однако, когда я хотел построить для производственной сборки и использовал serve -s build (https://create-react-app.dev/docs/deployment/). Некоторые CSS отсутствуют, я могу найти файл в редакторе стилей в инструментах разработки, но когда я проверяю элемент, в котором отсутствует CSS, элемент не имеет CSS, который определен в файле. Wird - это некоторые компоненты, которые есть, а некоторые нет. И это происходит только когда я использую serve -s build. Есть идеи?
Пример компонентов, где работает, а где нет:
import React from 'react'
import './myComponent.css'
const MyComponent = () => (
<div className='foobar'>fooo</div>
)
Dockerfile, который я использую:
FROM node:13.12.0-alpine
WORKDIR /usr/src/app
ADD package.json ./
RUN yarn config set @result:registry http://private.npm.com/
RUN yarn install
ADD public ./public
ADD config ./config
ADD src ./src
ENV BUILD_ENV=${REACT_APP_BUILD_ENV}
ARG PUBLIC_URL=${PUBLIC_URL}
ARG REACT_APP_APOLLO_URL=${REACT_APP_APOLLO_URL}
ARG REACT_APP_KEYCLOAK_URL=${REACT_APP_KEYCLOAK_URL}
ARG REACT_APP_KEYCLOAK_REALM=${REACT_APP_KEYCLOAK_REALM}
ARG REACT_APP_KEYCLOAK_CLIENT_ID=${REACT_APP_KEYCLOAK_CLIENT_ID}
VOLUME /tmp
RUN PUBLIC_URL=${PUBLIC_URL} yarn build
RUN yarn global add serve
CMD serve -s build -l 3000
EDIT: Также, если Я запускаю yarn build local и проверяю файлы stati c CSS. Я могу найти там className со всеми стилями, которые я определил в исходном файле CSS.