Стилизация компонентов React с использованием архитектуры SCSS 7-в-1 с Node-Express Backend - PullRequest
Новая
       29

Стилизация компонентов React с использованием архитектуры SCSS 7-в-1 с Node-Express Backend

0 голосов
/ 22 апреля 2019

Ранее я использовал архитектуру 7-в-1 для стилизации своего сайта, используя только html и scss. Сейчас я создаю полнофункциональное приложение, используя React для внешнего интерфейса и Express-MongoDB для внутреннего.

Проблема здесь возникает, когда я хочу добавить scss к своему компоненту реакции. У меня в папке src есть компонент целевой страницы (реакции) и каталог стилей, где я создал подкаталоги для моей архитектуры scss, например, для компонента посадки, его стиль в src/styles/components/_landing.scss.

Для реакции мое дерево каталогов выглядит так: src/components, App.js, а для моих стилей мое дерево каталогов выглядит так: src/styles/sub-directories, main.scss

Как мне импортировать это в мой компонент или я делаю все импорты в файле main.scss в моем каталоге стилей и импортирую этот файл куда?

Кроме того, для компиляции scss с помощью React у меня есть мой package.json вот так: 

    {
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "indicative": "^5.0.8",
    "jwt-decode": "^2.2.0",
    "node-sass": "^4.11.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.0.2",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "concurrently": "^4.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "compile:sass": "node-sass src/styles/main.scss src/index.css --watch",
    "react:sass": "concurrently \" npm run compile:sass \" \" npm start \" "
  },
  "proxy": "http://localhost:8005",
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Мой скрипт для компиляции scss не работает, так как файл index.css от реакции по-прежнему пуст. Пожалуйста, как я могу использовать одновременно для запуска приложения реакции (без серверной части сначала) с предварительно скомпилированными файлами scss?

Я также хочу знать после запуска React с архитектурой scss (7-в-1), как изменить сценарий server package.json для объединения внешнего интерфейса с scss и back-end?

В настоящее время мои серверные сценарии package.json выглядят так: 

   "scripts": {
    "client-install": "npm install --prefix client",
    "start": "node app.js",
    "server": "nodemon app.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },

Запуск npm run dev не показывает мои стили scss, так как они не компилировались. Мне нужна помощь в компиляции их для реакции и компиляции как сервера, так и клиента, используя одновременно, чтобы показать все стили.

Я считаю, что scss дает больший контроль над вашими css-файлами, чем использование отдельного стиля для каждого компонента React. Если есть решение для этого или лучший подход, я хотел бы узнать. Спасибо.

...