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变量,函数等,要实现这一目的,就还需要进行以下操作(前方高能):

============================-

react sass scss设置全局变量全局函数

定义全局变量的种方式: 

方式一(需要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月