create-react-app 创建的项目中引用less/sass

Question

问题描述

按照官网的配置加入了sass，但是有两处不足的地方，不知道在配置上还能否优化
https://github.com/facebook/c...

一个是不能在组件中直接引用.scss文件，只能引用编译后的.css（代码如下）；另一个问题是每次新建一个.scss,node-sass-chokidar貌似并不能监听到变化然后重新编译，需要手动重启项目才行

相关代码

Tabs.jsx

import React ,{Component} from 'react'
// 这里无法直接引用main.scss文件
// import '../../stylesheets/main.scss'
// 只能引用编译后的.css文件
import '../../stylesheets/main.css'

class Tabs extends Component{
    // eslint-disable-next-line
    // constructor(props){
    //     super(props)
    // }
    
    render(){
        return <div className="tabs">tabs</div>
    }
}

export default Tabs

package.json

"scripts": {
    "build-css": "node-sass-chokidar src / -o src /",
    "watch-css": "npm run build-css && node-sass-chokidar src / -o src / --watch --recursive",
    "_start": "react-scripts start",
    "_build": "react-scripts build",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "react-scripts build",
    "build": "npm-run-all build-css build-js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

请问我配置有问题吗？有没有更优的选择？

Answer 1

你应该配置less-loader，然后在react中直接引入.less文件。而不是先编译成css，再引入。这样的话，还不如直接写css呢。