Question

我有一个react应用，其中CSS个文件运行正常。
我需要开始使用SCSS，以便进行以下更改：

安装node-sass和sass-loader
将导入内容从.css更改为.scss
将文件扩展名从.css更改为.scss

但是我的页面无法正确加载：

当前行为： enter image description here

预期的行为： enter image description here

我的代码：

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开发和测试代码。

Answer 1

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

请提供更多信息。

今天愉快。

Answer 2

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。

否则，这里是What Webpack says about loaders。

Answer 3

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

反应：sass-loader无法将SCSS转换为CSS

3 个答案: