create-react-app 中添加sass less以及配置全局變量

mindwind 發布于2019-08-22 16:10 / 2441人閱讀

摘要：由于中沒有內置或者這種預編譯的工具這篇文章即為如何添加或者工具暴露配置首先全局下載創建一個項目然后暴露出的配置這里需要注意的是這個命令則是暴露出配置的命令添加然后安裝找到文件中的中找到在它里面已經配置了很多

由于create-react-app中沒有內置sass或者less這種預編譯的工具, 這篇文章即為如何添加sass或者less工具.

暴露webpack配置

首先全局下載create-react-app, 創建一個項目, 然后暴露出webpack的配置.

npm install -g create-react-app
create-react-app my-app
cd my-app
npm install
npm run eject

這里需要注意的是npm run eject這個命令則是暴露出webpack配置的命令.

添加sass

然后安裝sass-loader.

npm i sass-loader node-sass --save-dev

找到config文件中的webpack.config.dev.js 中找到

rules: []

在它里面已經配置了很多loader包括css的, 找到css的loader

{
            test: /.css$/,
            use: [
              require.resolve("style-loader"),
              {
                loader: require.resolve("css-loader"),
                options: {
                  importLoaders: 1,
                },
              },
              {
                loader: require.resolve("postcss-loader"),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: "postcss",
                  plugins: () => [
                    require("postcss-flexbugs-fixes"),
                    autoprefixer({
                      browsers: [
                        ">1%",
                        "last 4 versions",
                        "Firefox ESR",
                        "not ie < 9", // React doesn"t support IE8 anyway
                      ],
                      flexbox: "no-2009",
                    }),
                  ],
                },
              },
            ],
          },

就是這段代碼它已經給做了postcss后處理配置好了, postcss這里就不說了,不了解的可以google一下.
在這段代碼下面添加一段

{
            test: /.scss$/,
            use: [
              {loader: require.resolve("style-loader")},
              {loader: require.resolve("css-loader")},
              {
                loader: require.resolve("postcss-loader"),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: "postcss",
                  plugins: () => [
                    require("postcss-flexbugs-fixes"),
                    autoprefixer({
                      browsers: [
                        ">1%",
                        "last 4 versions",
                        "Firefox ESR",
                        "not ie < 9", // React doesn"t support IE8 anyway
                      ],
                      flexbox: "no-2009",
                    }),
                  ],
                },
              },
              require.resolve("sass-loader")
            ],
          },

這樣你dev跑起來的時候scss文件就可以編譯過去了而且還做了后處理, 也不用自己去加一個前綴什么的.需要注意的是在build時不會去編譯如果想build時也編譯的話. 在同級目錄中找到webpack.config.prod.js, 在它里面找到css的loader, 把編譯sass的loader放入相同的位置即可.

添加sass全局變量

在我們使用sass時, 變量可以說是離不開的. 我們在使用時每個需要用到的組件都需要去引入, 這樣很麻煩.

這時就用到了sass-resources-loader, 它可以添加全局變量等.

首先下載依賴包npm i sass-resources-loader --save-dev.
在上面添加scss規則的loaders中加入sass-resources-loader:

...
{
    test: /.scss$/,
    use: [
        {loader: require.resolve("style-loader")},
        {loader: require.resolve("css-loader")},
        {
        loader: require.resolve("postcss-loader"),
        options: {
            // Necessary for external CSS imports to work
            // https://github.com/facebookincubator/create-react-app/issues/2677
            ident: "postcss",
            plugins: () => [
            require("postcss-flexbugs-fixes"),
            autoprefixer({
                browsers: [
                ">1%",
                "last 4 versions",
                "Firefox ESR",
                "not ie < 9", // React doesn"t support IE8 anyway
                ],
                flexbox: "no-2009",
            }),
            ],
        },
        },
        require.resolve("sass-loader"),
        {
            loader: require.resolve("sass-resources-loader"),
            options: {
                resources: "./src/assets/css/theme.scss"
            }
        }
    ],
},
...

這樣theme.scss就成為不需要引入就可以使用的全局變量了.

云服務器 GPU云服務器在c語言中全局變量配置庫文件中的變量全局變量全局變量操作

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94109.html

初探react技術棧（一）

摘要：相信用的同學也不少找到函數在其中中添加啟用編譯。。。react 最近已經開始使用react技術棧了，從頭開始搭建項目，有必要的記錄一下配置的過程以及項目分層的思路，這次后臺項目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語言react-intl create-react-app 這是官方維護的腳手架應用我們一般也采用這個 $ npm or c...

劉玉平 2019-05-23 16:23 評論0 收藏0
初探React技術棧（一）

react 最近已經開始使用react技術棧了，從頭開始搭建項目，有必要的記錄一下配置的過程以及項目分層的思路，這次后臺項目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語言react-intl create-react-app 這是官方維護的腳手架應用我們一般也采用這個 $ npm or cnpm $ npm install create-react...

neroneroffy 2019-08-26 13:53 評論0 收藏0
指尖前端重構（React）技術調研分析

摘要：一為什么選擇是當前前端應用最廣泛的框架。目前來看的生態系統要比大的多，在等最大的技術社區搜索兩者，的搜索結果是的十倍左右，另外據近期統計使用的站點是的幾百倍以上。其中是基于技術，依然是瀏覽器應用。一、為什么選擇React React是當前前端應用最廣泛的框架。三大SPA框架 Angular、React、Vue比較。 Angular出現最早，但其在原理上并沒有React創新的性能優化...

AlphaWallet 2019-08-23 18:18 評論0 收藏0
通過create-react-app從零搭建react環境

摘要：通過文件可以對圖標名稱等信息進行配置。注意，注冊的只在生產環境中生效，并且該功能只有在下才能有效果該文件是過濾文件配置該文件是描述文件定義了項目所需要的各種模塊，以及項目的配置信息比如名稱版本許可證等元數據。一、快速開始：全局安裝腳手架： $ npm install -g create-react-app 通過腳手架搭建項目： $ create-react-app 開始項目： ...

Cympros 2019-08-02 16:02 評論0 收藏0
通過create-react-app從零搭建react環境

摘要：通過文件可以對圖標名稱等信息進行配置。注意，注冊的只在生產環境中生效，并且該功能只有在下才能有效果該文件是過濾文件配置該文件是描述文件定義了項目所需要的各種模塊，以及項目的配置信息比如名稱版本許可證等元數據。一、快速開始：全局安裝腳手架： $ npm install -g create-react-app 通過腳手架搭建項目： $ create-react-app 開始項目： ...

CoyPan 2019-08-22 18:05 評論0 收藏0