Question

我以前使用7合1架构来仅通过html和scss来设置网站样式。现在，我正在构建一个全栈应用程序，其中将React用于前端，将Express-MongoDB用于后端。

当我要将scss添加到我的react组件时，就会出现这里的问题。我在src文件夹中有一个登录页面组件（react）和一个样式目录，在其中为我的scss体系结构创建了子目录，例如登陆组件，其样式位于src/styles/components/_landing.scss中。

对于react，我的目录树是这样的：src/components, App.js，对于我的样式，我的目录树是这样的：src/styles/sub-directories, main.scss

如何将其导入到我的组件中，或者如何在样式目录的main.scss文件中进行所有导入，然后将该文件导入到哪里？

另外，要用React编译scs，我需要这样的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脚本无法正常工作，因为react的index.css文件仍然为空。请问我如何同时使用带有预编译的scss文件来启动React应用（首先没有后端）？

我还想知道运行具有scss（7合1）架构的React之后，如何更改服务器package.json脚本以将前端与scss和后端捆绑在一起？

当前，我的服务器端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样式，因为它们没有编译。我需要帮助编译它们以作出反应，并同时使用显示所有样式的方式编译服务器和客户端。

与每个React组件使用单独的样式相比，我相信scss可以更好地控制css文件。如果有解决方案或更好的方法，我想学习。谢谢。

使用SCSS 7合1架构和Node-Express后端对React组件进行样式设置

0 个答案: