2019最新create-react-app创建的react中使用sass/scss,以及在react中使用sass/scss公共变量的方法
Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。Sass是一个将脚本解析成CSS的脚本语言，即SassScript。Sass包括两套语法。最开始的语法叫做“缩进语法”，与Haml类似，使用缩进来区分代码块，并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。通常情况下，这两套语法通过.sass和.scss两个文件扩展名区分开。相信每个前端开发者都对这种css预处理器有所耳闻。
不管你是刚使用Reactjs或者是Reactjs的老司机，你们一定都听说过create-react-app这个脚手架，而从create-react-app的官方文档中，我们可以看到他们暂时还不支持直接导入LESS或者Sass。但是通过一些配置，我们还是可以从官方脚手架中使用sass/scss/less的。
首先我们先安装node-sass这个组件，我推荐我们国内的coder使用下面的命令行安装
npm install -g mirror-config-china --registry=http://registry.npm.taobao.org
npm install node-sass
然后在自己项目的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",
小提示: 在使用不同的预处理器时，请根据预处理的文档替换build-css和watch-css命令。
现在，您可以将src/App.css重命名为src/App.scss并运行npm run watch-css。watch-css将在src子目录中找到每个Sass文件，并在其旁边创建一个相应的CSS文件，在我们的例子中覆盖src/App.css。由于src/app.js仍然 improt src/App.css，所以样式同样成为您的应用程序的一部分。您现在可以编辑src/App.scss，同时会生成相应的src/App.css。
为了能一边编译sass，一边运行我们的前端项目，我们还需要npm-run-all这个工具，这是一个并行运行多个npm脚本的脚手架工具，安装方式也非常简单。
$ npm install npm-run-all --save-dev
# or
$ yarn add npm-run-all --dev
最后，在不使用ejec命令的情况下，更改create-react-app的webpack配置，我们使用react-app-rewired来处理，安装方式如下:
$ npm install react-app-rewired --save-dev
在完成这些步骤之后，我们修改package.json的script内容，让sass一边编译，一边跑着我们的前端项目，实现热更。
"scripts": {
"build-css": "node-sass src/ -o src/",
"watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
"start-js": "node scripts/start.js",
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
scripts的命令如上所述，安装完之后，npm start就可以搞定sass的使用问题了。
现在运行run npm和npm run build同样构建了Sass文件。
作者：Originalee
链接：https://www.jianshu.com/p/8c577509079f
来源：简书
如果需要定于全局的scss样式,只需要完成以上设置后,将index.css文件改成index.scss就行
然后在index.js文件中引入 import './index.scss';
以上就是在最新creact-react-app搭建的react项目中使用sass的配置方式; 实际开发中还需要定义公共的sass变量,函数等,要实现这一目的,就还需要进行以下操作(前方高能):
============================-
定义全局变量的种方式:
方式一(需要eject暴露环境,不推荐): https://www.jianshu.com/p/ec57dd11c4eb
1.安装 sass-resources-loader
npm i sass-resources-loader --save-dev
2.暴露配置文件 npm run eject //如果这一步报错,可能是安装了git后出现的问题,解决方案是:
git add .
git commit -am "Save before ejecting"
npm run eject
这样就能eject了
3.修改 config 里面的 webpack.config.js
在 getStyleLoaders后面添加如下代码
.concat({
loader: 'sass-resources-loader',
options: {
resources: [
// 这里按照你的公共变量文件路径填写
path.resolve(__dirname, './../src/common.scss')
]
}
})
最终代码如下
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'sass-loader',
).concat({
loader: 'sass-resources-loader',
options: {
resources: [
// 这里按照你的公共变量文件路径填写
path.resolve(__dirname, './../src/common.scss')
]
}
}),
sideEffects: true,},
提示: './../src/common.scss' 这个是我的公共的sass路径 根据你自己的来配置
以上步骤完成后,重新npm start就可以使用公共变量了.
方式二(不需要eject暴露环境,强烈推荐使用这种方式!!!):
1 安装3个模块: cnpm install react-app-rewired customize-cra sass-resources-loader --save-dev
2 在package.json的同级目录中新建一个config-overrides.js文件,在该文件中写入以下代码:
const { override, adjustStyleLoaders } = require("customize-cra");
module.exports = override(
// ...其他配置...
adjustStyleLoaders(rule => {
if (rule.test.toString().includes("scss")) {
rule.use.push({
loader: require.resolve("sass-resources-loader"),
options: {
resources: "./src/assets/scss/color/outcolor.scss" //这里是你自己放公共scss变量的路径
}
});
}
})
// ...其他配置...
);
3 在package.json文件中,将 "scripts"修改为:
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "node scripts/start.js",
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
4 最后重新运行一下: npm start; 大功告成!!
看完觉得有用的同学,帮忙点个赞让更多人看到吧~~(比心)
2019年12月
