2

我有一个文件工作正常的react应用程序。 我需要开始使用所以进行以下更改:CSS
SCSS

  1. 安装node-sasssass-loader
  2. 将导入从更改.css.scss
  3. 将文件扩展名从更改.css.scss

但是我的页面没有正确加载:

当前行为:在此处输入图像描述

预期行为:在此处输入图像描述

我的代码:

package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@coreui/coreui": "^3.0.0",
    "@stardust-ui/docs-components": "^0.40.0",
    "axios": "^0.19.0",
    "bootstrap": "^4.4.1",
    "compass": "^0.1.1",
    "css-loader": "^3.4.2",
    "mdbreact": "^4.25.4",
    "prettier": "^1.6.1",
    "prop-types": "^15.7.2",
    "react": "^16.10.2",
    "react-bootstrap": "^1.0.0-beta.16",
    "react-bootstrap-sidebar": "0.0.1",
    "react-dom": "^16.10.2",
    "react-fixed-bottom": "^1.0.2",
    "react-modal": "^3.11.1",
    "react-rangeslider": "^2.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^1.1.5",
    "reconnecting-websocket": "^4.2.0",
    "reconnectingwebsocket": "^1.0.0",
    "semantic-ui-react": "^0.88.2",
    "style-loader": "^1.1.3",
    "styled-components": "^4.4.1"
  },
  "scripts": {
    "start": "PORT=3000 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "node-sass": "^4.13.1",
    "sass-loader": "^8.0.2"
  }
}

我在 node_modules/react-scripts/config/webpack.config.dev.js 中注入了加载程序的代码,如下所示:

// Process JS with Babel.
          {
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              // @remove-on-eject-begin
              babelrc: false,
              presets: [require.resolve('babel-preset-react-app')],
              // @remove-on-eject-end
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              cacheDirectory: true,
            },
          },
          { 
            test: /\.scss$/, 
            loader: [
              "css-loader",
              "sass-loader"
            ]
          },

这是我的组件:

import React, { Component } from "react";
import '../../../general.scss';
import { Warning } from '../../../images/images_svg';

class Terminos extends Component{
  state = { error: false }

  saveAndContinue = () => {
    if(this.props.values.terminos) {
       this.props.nextStep()      
    }
    else {
       console.log(this.props.values.terminos_error)
       this.props.mandar_error('terminos_error')
    }     
  }

  render() { 
    return (
      <div className="formulario">
        <div className="formulario-seccion-titulo">
          <div className="formulario-seccion-barrita"/>
            <div className="formulario-seccion-content">
               Presentacion
            </div>
          </div>      
          <div className={this.props.values.terminos_error ? "formulario-seccion" : "formulario-seccion-red"}>
             La actual pandemia que afecta al mundo trae consecuencias a nivel sanitario, económico y social. Lo que está ocurriendo con el COVID impacta de lleno, no sólo en la salud física de las personas, sino que también afecta de forma clara y contundente su salud mental.<br/><br/>
             Ud. puede decidir si contestar o no la encuesta que sigue pero de hacerlo,acepta que los resultados de la misma sean compartidos con su empleador con el único fin de brindarle contención y asistencia. La encuesta debe completarse en las próximas 10 horas.<br/><br/>
             <input type="checkbox" 
               id="terminos" 
               className="formulario-checkbox"
               onChange={() => this.props.handleTerminos()}
               checked={this.props.values.terminos}
             />  
             <label className="formulario-checkbox-label" htmlFor="terminos"> 
               Acepto terminos y condiciones.
             </label>
             {this.props.values.terminos_error===false &&
                <div className="formulario-seccion-error">
                  <div className="formulario-seccion-error-logo" >
                    <Warning color="#d93025"/>
                  </div>
                    Debes aceptar los terminos y condiciones para continuar
                </div>
              }
           </div>
           <div className="formulario-footer">
             <button className="formulario-botones" onClick={this.saveAndContinue}>Siguiente</button>
           </div>
         </div>
       )    
    }
}

export default Terminos;

如果我将导入和文件扩展名从.scss更改.css为页面加载正确。
npm start用来开发和测试代码。

4

3 回答 3

0

好的,我解决了它删除 node-modules 文件夹、package-lock.json 和 package.json 中的所有依赖项。然后我重新安装了所有依赖项npm install ...。我认为问题出在 react-scripts 模块,我从版本 1.1.5 升级到 3.4.1 。谢谢大家的答案。

于 2020-04-07T21:22:48.923 回答
0

Webpack已经看到了巨大的变化,直到version 4

当我们使用它时create-react-app,它会安装一个兼容版本,Webpack用于react-scripts捆绑您的文件,并Webpack-server在您运行时将它们用作开发服务器npm start

  • "webpack": "^3.11.0"从您的删除,package.json 因为它已经由react-scripts.

  • react 16+经常使用,react-scripts 3+所以如果你手动编辑了这个package.json文件的一些,我建议你保留安装的默认值,create-react-app然后添加你的其他dependencies.

否则,这就是Webpack 关于 loaders的说法。

于 2020-04-05T11:35:31.610 回答
0

您是否使用 Create-React-App 创建了项目?在这种情况下,你不需要sass-loader,你只需要node-sass,并将你的 CSS 样式导入到你的根文件中,扩展名为 .scss/sass ,例如import '../example.scss',然后需要配置 webpack.config.js 在全部。

请提供更多信息。

祝你今天过得愉快。

于 2020-04-04T16:33:42.127 回答