与sass合作并做出反应

时间:2018-03-17 19:13:50

标签: reactjs sass

我正在学习React,我已经用CRA创建了一些应用程序。 我还没有找到一个很好的方法来将sass包含在我的反应项目中,所以我想出了这个:

install node-sass on the src folder

将其添加到package.json

"node:sass": "node-sass src/index.scss src/index.css -w"

然后在每个组件上,我会添加一个sass部分文件,所以我可以将样式和js文件保存在同一个文件夹中。

这样做有什么问题吗?

我已经阅读了一些教程来配置webpack以使用sass但它听起来很复杂。

3 个答案:

答案 0 :(得分:1)

包括每个组件的部分内容很好,实际上鼓励作为标准。然后将其包含在带有ExtractTextPlugin的webpack中,这允许您将所有sass文件捆绑到您在index.html中导入的单个css文件中。您可以在此处查看示例:https://github.com/ianshowell/react-serverless-kickstart/blob/master/webpack.common.js#L46

为了使其正常工作,您还需要包含sass-loader,它将让您的Js文件解析您的Sass类名。随意使用上面代码链接的我的入门包,以帮助您全面了解。

编辑:另外,请查看此示例组件,了解导入样式的工作原理:https://github.com/ianshowell/react-serverless-kickstart/tree/master/src/components/TodoItem

答案 1 :(得分:0)

如果你想在你的反应应用程序中使用sass,请安装chokidar 它会帮助你: https://www.npmjs.com/package/react-scripts-sass-chokidar

答案 2 :(得分:0)

创建react app v2,开箱即用支持SASS(https://reactjs.org/blog/2018/10/01/create-react-app-v2.html) 这里是阅读文档的链接:https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav

所有您需要的是安装node-sass(如果尚未安装)

npm i node-sass --save-dev

然后确保导入具有scss扩展名的文件。 如果您需要更改旧的CSS文件,请更改扩展名,然后按照导入进行操作。