Less/sass is referenced in the project created by create-react-app - Codes Helper - Programming Question Answer

Less/sass is referenced in the project created by create-react-app

problem description

added sass, according to the configuration of the official website, but there are two shortcomings. I don"t know whether the configuration can be optimized
https://github.com/facebook/c.

.

one is that the .scss file cannot be referenced directly in the component, but only the compiled .css (the code is as follows); another problem is that each new .scss , node-sass-chokidar does not seem to be able to listen for changes and then recompile, you need to restart the project manually

related codes

Tabs.jsx

"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"
  }

is there something wrong with my configuration? Is there a better choice?

Javascript react.js

Jun.04,2021

you should configure less-loader , and then introduce the .less file directly into react. Instead of compiling to css before introducing. In that case, you might as well write css directly.

Previous: React breadcrumb navigation, how to route incoming metadata

Next: Why does setTimeout cause some loaded: parameters of the ckplayer player to fail to load?

React projects cannot save store? using redux, data
react projects cannot save store? using redux, data index.js ReactDOM.render( <Provider store={store}> <Router > < Provider>, document.getElementById( root )) registerServiceWorker() actions export const SET_USER = ...

Javascript react.js redux

Feb.26,2021
How does react change the value of input
how to use react to change the value of Input < hr > export default class myForm extends Component{ constructor(props){ super(props); this.state = { id: , }; } change=()=>{ var idIn...

Javascript react.js

Feb.26,2021
This problem in react component method
1 2 as shown in the two figures above: in the react component, it is known that all other environments are the same, except that there is an extra layer of arrow function in figure 1. Ask: why is it that in the scroll method of this component, this i...

Javascript react.js

Feb.27,2021
About the scaffolding of dva
Let me ask you a question. I use dva scaffolding to build the project. I want to use browserHistory as the background interface, but the packaged project is blank and there is no error! If you change to use the default hashHistory, it will be fine....

Dva.js javascript react.js

Feb.27,2021
How to locate the cursor to a tr by the Table component under antdesign
recently, a company project has a requirement to use input to query an attribute in table, and then the interface locates to that tr and changes the color to identify it. It seems that Table s api cannot be realized. Is there a good way to implement it?...

Javascript react.js

Feb.27,2021
Using flexbox layout problems?
AB are elastic layouts A distance B minimum 20 A can compress B B minimum 30 AB is located at both ends of the horizontal how to implement this layout with flexbox? as shown in the figure: ...

React-native javascript react.js flexbox flex

Feb.28,2021
Switch routes, the timer on the previous page is still running
at the home page, the message prompts you to jump to the Detail component to initialize the data that can only be rendered from Control. Clicking on a new message here will not trigger constructor, so I am dealing with nextProps data. If the time of the ...

React-router front-end redux javascript react.js

Feb.28,2021
How to combine multiple objects into an array object
{ "date":{"0":"20180201","1":"20180202","2":"20180205"}, "lines":{"0":3.3,"1":10.4,"2":79.721}, "count":{"0":5,"1":...

Javascript react.js

Feb.28,2021
[to fix] how does react circulate the data in the interface?
A single output data is OK, how to loop the data in the output interface? Solve? original <div id="demo">< div> <script type="text babel"> var UserGist = React.createClass({ getInitialStat...

Javascript react.js

Feb.28,2021
Reactjs multiple pages need to get the values returned by the same ajax.
there are multiple pages that need to have a property that needs to call the API to return judgment display logic my idea is to cache but how to write multiple pages to write code as little as possible want a rough code design framework it s not ho...

Javascript react.js

Feb.28,2021
How to transfer parameters between two subpages by react-router4.0
the "Application enabling platform " page is expanded by default. Radio selects a row in the table, id as a parameter, and the page that needs to be passed to the enterprise information. In topic, it is impossible to pass parameters in the form of call...

Javascript react.js react-router4

Feb.28,2021
React's warning
an error was prompted after using server-side rendering mobx Please also explain ...

Node.js javascript react.js

Mar.01,2021
React error report solution!
Warning: Encountered two children with the same key, `.$4`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and or omitted the behavior is unsupported and could change i...

Javascript react.js html5 node.js redux

Mar.01,2021
After the react parent component setState updates the data, the props passed to the child component is undefined
the updated value of the parent component is obtained from the child component, and then the updated value is passed to another child component , but what you get is undefined, that is, you can get the value before the parent component is updated. After...

Javascript react.js

Mar.01,2021
Websocket re-new the address after being disconnected. Ws.onmessage has no data.
after WebSocket was disconnected, I re-new a link. In the new connection, I can continue to receive and send data, but I found that ws.onmessage did not return the data after reconnection. I think he is still waiting for the data of the address before ...

Redux javascript react.js websocket

Mar.01,2021
Is @ connect a grammatical sugar in react-redux? How to use it?
currently only know the traditional usage const App = connect( mapStateToProps, mapDispatchToProps )(Counter); but many projects use @connect(state => ({ value: state.global.value, extinfo: state.extinfo, })) I can understand what i...

Javascript react.js redux

Mar.02,2021
What is the performance overhead of automatic binding of js functions?
problem description When react creates components, it is recommended to use React.Component instead of React.CreateClass . The reason is that React.CreateClass will automatically bind functions, which will cause unnecessary performance overhead. ...

Javascript react.js

Mar.02,2021
At the beginning, there was a problem in using redux, to use redux to add, delete, check and correct data.
I have been studying redux for several days, and I am doing a redux dome, that adds, deletes, checks and modifies the data. I follow the tutorials I am looking for on the Internet, but I don t understand. so now there are several mistakes and there is...

Javascript react.js

Mar.02,2021
After the promotion of webpac4, the node did not make an error, but the following error appeared on the page
the configuration is as follows: const webpack = require ( webpack ) const path = require ( path ) const fs = require ( fs ) const chalk = require ( chalk ) const HtmlWebpackPlugin = require ( html-webpack-plugin ) const WebpackMd5H...

Javascript react.js webpack

Mar.03,2021
There's something wrong with the HOC that wrote a React.
HOC function: accepts Input | TextArea and other input components in the antd component, and injects the debounce method in lodash into the onchange event. The code is as follows: import {Input} from antd ; HOC(<Input >) ...

Javascript react.js

Mar.03,2021

Menu