react1.6版本新增sass與less的支援

黃小凡發表於2019-01-16

在新版本的react中分別新增sass與less支援,注意是用create-react-app腳手架工具建立的專案。

新增sass支援

新增sass支援非常簡單,只需要執行以下命令安裝node-sass即可,如果不生效,請重啟專案。

npm i node-sass  --save

新增less支援

新增less支援稍微有點麻煩,因為對sass的支援在create-react-app腳手架中已經配置好了,但是less的沒有配置,需要我們手動配置,請按照以下步驟:

安裝less和less-loader

npm i less less-loader  --save

釋放eject

npm run eject

此命令會在當前目錄下生產config資料夾

修改配置檔案

開啟/config/webpack.config.js檔案,找到以下程式碼:

// Adds support for CSS Modules, but using SASS
            // using the extension .module.scss or .module.sass
            {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                `sass-loader`
              ),
            },
           // **********
           //**********
           // **********
            // "file" loader makes sure those assets get served by WebpackDevServer.
            // When you `import` an asset, you get its (virtual) filename.
            // In production, they would get copied to the `build` folder.
            // This loader doesn`t use a "test" so it will catch all modules
            // that fall through the other loaders.

在以上程式碼中,原來的程式碼是沒有,只是為了突出這個位置,可以看到已經配置好了sass,把*替換為以下程式碼,然後重啟即可。

// 新增less-loader
            {
              test: /.less$/,
              use: [
                require.resolve(`style-loader`),
                {
                  loader: require.resolve(`css-loader`),
                  options: {
                    importLoaders: 1,
                  },
                },
                {
                  loader: require.resolve(`less-loader`) // compiles Less to CSS
                }
              ],
            },

以上。


相關文章