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
來源：簡書
如果需要定於全局的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月