React - стиль не компилируется при запуске npm run build

Впервые я запустил npm run build и загрузил его на свой сервер.

Я понял, что никакого стиля не удалось реализовать очень быстро и что он даже не упоминается в моем файле index.html.

Все это отлично работает с моей настройкой разработчика, когда я запускаю npm start

Это моя производственная конфигурация, и мне интересно, есть ли что-нибудь очевидное, почему она не работает.

https://jsfiddle.net/vmt20f8w/

Я должен указать, что я использую файлы SCSS вместо css и импортирую их в свои js-файлы компонентов. Я думал, что webpack.config.prod.js затем возьмет все эти файлы scss и скомпилирует их в один файл css?

Обновлять

Теперь я обновил свою конфигурацию с помощью приведенного ниже кода, но scss все еще не компилируется.

      {
        test: /\.scss$/,
        use: [{
            loader: "style-loader"
        }, {
            loader: "css-loader"
        }, {
            loader: "sass-loader",
            options: {
                includePaths: ["absolute/path/a", "absolute/path/b"]
            }
        }]
      },

Чтобы сделать это еще более ясным, у меня на самом деле есть публичное репо, в котором люди могут просмотреть весь мой код, чтобы понять проблему: https://github.com/maximus-lynn/react-portfolio

В вашей конфигурации у вас есть «test: /\.css$/» вместо «test: / \. Scss $ /» ... не уверен, что это ошибка. Я новичок в веб-паках ^^

Janick Fischer 19.03.2018 14:59

Ха, я тоже новичок в веб-паках

MaxwellLynn 19.03.2018 15:18

попробуйте без вариантов

illiteratewriter 19.03.2018 15:27

нет, даже без опций это не работает.

MaxwellLynn 19.03.2018 15:30
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
4
1 658
1

Ответы 1

Вы используете загрузчик для файлов css, но не для файлов scss. Установите sass-loader и измените свою конфигурацию, чтобы она выглядела примерно так:
test: /\.scss/, loader: 'style-loader!css-loader!sass-loader'

@MaxwellLynn, хорошо, сложно сказать, не увидев весь проект. Возможно, что-то с импортом таблицы стилей в проект не соответствует связанным файлам, но ваша конфигурация веб-пакета содержит множество вещей, которые, я думаю, можно упростить, чтобы создать минимальный проект (при условии, что он находится на довольно ранней стадии разработки, так как вы запускали npm run build в первый раз) Вы можете посмотри на мой пример для конфигурации, которую я недавно опубликовал, может что-то найти.

Kristoffer Lund 19.03.2018 16:01

ах спасибо, я проверю. Я обновил свой вопрос, добавив доступ ко всему моему коду, который я написал, кстати.

MaxwellLynn 19.03.2018 16:12

так хотелось просто написать сценарий для компиляции каждого файла scss в один, а затем вручную импортировать его в файл html

MaxwellLynn 19.03.2018 16:22

Другие вопросы по теме