Можно ли удалить файл theme.min.css из dev сборки?

Question

[Santos2004]

есть dev сборка сайта. есть сайт на React + WebPack. есть Bootstrap и +100500 scss файлов со стилями разных компонентов.
но при этом есть и theme.min.css который стал итогом одной из сборок сайта. Но. теперь работает только он. и чтобы поменять что то в дизайне я могу менять только его чтобы был эффект. а менять его неправильно. так как бы временный. и регенерируемый. при этом я не трогаю те файлы которые собственно и надо менять. Как мне быть? могу ли я его снести?

Comments

[sergski]

theme.min.css -- это минифицированный файл и он создаётся не для изменений, а текущего применения на рабочем проекте (сайте). Его имя, которое используется на сайте, задаётся в вашем сборщике.

[Santos2004]

sergski, это я понимаю. но как мне менять дизайн? тем более есть зловредная порча

[sergski]

Santos2004, дизайн меняется в рабочих файлах. Кроме public/css с вашим theme.min.css у вас должна быть папка с рабочими файлами (scss?), там и меняейте. Пути к ним смотрите в вашем сборщике (gulp?)
Просто удалить theme.min.css вам ничего не даст

[Ankhena]

Скорее нужно узнавать почему перестала работать сборка.
И давно ли этот ваш файлик отвязался от неё.

Вообще, этому файлу нечего делать в исходниках. Но мало ли какая логика была у разработчика сборки.

Как мне быть? могу ли я его снести?

Какие проблемы? Всегда можно снести, узнать что будет и принять решение, нормально ли это.

[sergski]

Ankhena, на всякий случай уж лучше переименовать файл, типа theme.min.css.old

[Santos2004]

sergski, так не могу))) все перехватывает theme.min.css
следов gulp не нашел. есть css-loader

[Ankhena]

sergski, какая разница как его потом возвращать? Переименовать обратно, перенести из резервной папки, снова забрать из гита или еще как..
Показалось излишним расписывать всё как в детском садике.

[Santos2004]

Ankhena, он как раз не отвязался. он как раз мешает. и перехватывает все. и чтобы были какие то изменения я вынужден менять его. но это же не верно в корне

[Михаил Р.]

sergski,

theme.min.css.old

И появится у нас новый тип файлов с расширением .old . Может лучше theme.min.old.css или _theme.min.css?

[Ankhena]

Santos2004, под отвязался я имела в виду, давно ли изменения вносятся в него, а не в исходники.

Но ответ не меняется - выясняйте почему не работает сборка. Или работает, но собирает всё куда-то не туда, куда вы смотрите.

[sergski]

Santos2004, может и не Gulp)
Михаил Р., да, это для наглядности

[Santos2004]

Ankhena, нет. недавно. я начал править. что бы просто понять что могу это поменять.
есть еще _react-select.scss где собственно те же настройки. но как бы я его не менял ничего не происходит.
еще могу скопировать эти же классы в user.scss но если они есть в theme.min.css то работает theme.min.
в каких файлах настройки это может быть прописано?

[Santos2004]

удалил theme.min.css дизайн сломался.

как удалить зависимость и заставить работать исходники?

[Ankhena]

Santos2004, вы правда верите, что без кода и/или сообщения об ошибке вам кто-то ответит как починить?

[Santos2004]

Ankhena, нет. я просто пытаюсь подмести за чудаком на м.
поэтому скажите пожалуйста какой код вам нужен?

[Santos2004]

такс. при удалении theme.min и запуске сервера выдает это

Compiled with warnings.

Warning
(835:3) autoprefixer: start value has mixed support, consider using flex-start instead

Warning
(24:5) autoprefixer: start value has mixed support, consider using flex-start instead

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in ./src/assets/scss/user.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[0].oneOf[7].use[3]!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[7].use[4]!./src/assets/scss/user.scss)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

(835:3) autoprefixer: start value has mixed support, consider using flex-start instead

WARNING in ./src/components/Header/Header.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[0].oneOf[7].use[3]!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[7].use[4]!./src/components/Header/Header.scss)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

(24:5) autoprefixer: start value has mixed support, consider using flex-start instead

webpack compiled with 2 warnings

[Santos2004]

какие еще файлы настроек показать?

Answer 1

[Михаил Р.]

а менять его неправильно. так как бы временный

Это не временный, а минимизированный и постоянный css файл для продакшен ветки (по крайней мере так они именуются).

Можно ли удалить файл theme.min.css из dev сборки?

Вообще, визуально, файл похож на итоговый минимизированный css файл для продакшена, НО! Зависит от контекста конкретного проекта, вполне можно случиться так, что:
- Предыдущий разраб так назвал постоянный файл для dev ветки.
- Файл участвует как часть в scss или js при сборке.

Чтобы убедиться точно, перенесите проект в тестовую директорию и запустите dev ветку без этого файла, проверьте в консоли браузера, нет ли ошибок подключения этого файла, если все ок - то все ок.

Comments

[Santos2004]

ну временный в смысле перекомпилируемый при каждой сборке. ))) и чего бы я там не поменял превратиться в тыкву. на самом деле учитывая что этот суп просто навредил. там есть еще 1 с похожим названием.
в каталоге public/css есть вот это:

user.min.css
user.rtl.min.css
theme.min.css
theme.rtl.min.css
theme.min.css.map
user.min.css.map

что можно прибить чтобы заработали первоисточники?

[Сергей delphinpro]

Santos2004, обычно дев-версия работает с исходниками. но настроено может быть по-разному. Изучайте как настроена ваша сборка, или просто методом тыка удалите файлы, и посмотрите как будет работать.

[Santos2004]

да так собственно и делаю))) просто страхуюсь. лучче спросить. там есть плагин для перекомпилирования scss -->css и дальнейшего минимизирования. хотя там 19000 строк )))
вопрос скорее в том вот я снесу theme.min.css
что дальше? руками что-то делать еще надо?

[Михаил Р.]

Santos2004,

что дальше? руками что-то делать еще надо?

Любой ответ без текущего контекста - пальцем в небо. Сборка может быть настроена как угодно.

[Santos2004]

Сергей delphinpro, где это настраивается?

[Михаил Р.]

Santos2004, если используйте webpack, то в обычно в корне проекта лежит webpack.config.js

[Santos2004]

Михаил Р., так он скорее пуст вот он:

import { BuildEnv, BuildPaths } from './config/build/types/config';
import path from 'path';

import webpack from 'webpack';
import { buildWebpackConfig } from './config/build/buildWebpackConfig';

// eslint-disable-next-line import/no-anonymous-default-export
export default (env: BuildEnv) => {
  const paths: BuildPaths = {
    entry: path.resolve(__dirname, 'src', 'index.tsx'),
    build: path.resolve(__dirname, 'build'),
    html: path.resolve(__dirname, 'public', 'index.html'),
    src: path.resolve(__dirname, 'src')
  };

  const mode = env.mode || 'development';

  const apiUrl =
    process.env.REACT_APP_SERVER_URL || process.env.REACT_APP_NEURAL_NETWORK;

  const isDev = mode === 'development';
  const analysis = env.analysis || false;
  const config: webpack.Configuration = buildWebpackConfig({
    mode,
    paths,
    isDev,
    apiUrl,
    project: 'frontend',
    isAnalysis: analysis
  });

  return config;
};

[Santos2004]

удалил theme.min.css дизайн сломался.

как удалить зависимость от этого файла и заставить работать исходники?

[Михаил Р.]

Santos2004, поищите в исходниках по имени theme.min.css, может найдете, где он подключается

[Santos2004]

Михаил Р., первое что сделал. Webstorm. сквозной поиск. НИЧЕГО

где еще искать ?

[Ankhena]

Santos2004, искать куда компилируются стили

[Santos2004]

Ankhena, а что это даст? файл то физически есть. а упомининия о нем нет

[Михаил Р.]

Santos2004, в теории, он может быть использован в момент компиляции, но опять же, к нему должны обращаться по имени, соответственно при поиске это имя должно находиться

[Santos2004]

Михаил Р., именно. но нет. мож я чего то не т о делаю. 2 раза shift и пошло в WebStorm
как это в VS делается?
ко всему. отсутствие его же рушит стили сайта. как то он подключается? именно подключается. а не компилируется. так как последние изменение 5 утра мои. а сайт я уже перегружал кучу раз

[Михаил Р.]

Santos2004,

именно подключается. а не компилируется

Он может быть частью компилируемого бандла, например импортироваться где то в компилируемых исходниках.

[Santos2004]

но. я нашел. как он подключается.
сначала строчка в Main.tsx

import useToggleStyle from './hooks/reduxHooks/useToggleStyle';

затем вот

const link = document.createElement('link');
    link.href = `${process.env.PUBLIC_URL}/css/theme${
      isRTL ? '-rtl' : ''
    }.min.css`;
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.className = 'theme-stylesheet';
    link.onload = () => {
      setIsLoaded(true);
    };

теперь главный вопрос. как его повторно собрать и какой командой webpack запустить?

[Santos2004]

как мне перестроить theme.min.css не перестраивая весь сайт?
не npm run build

[Santos2004]

кстати. а что лучше. перекомпилировать весь каталог scss в theme.min.css или подключить этот же каталог через
import * from '/scss';