成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

mindwind / 2509人閱讀

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

由于create-react-app中沒(méi)有內(nèi)置sass或者less這種預(yù)編譯的工具, 這篇文章即為如何添加sass或者less工具.

暴露webpack配置

首先全局下載create-react-app, 創(chuàng)建一個(gè)項(xiàng)目, 然后暴露出webpack的配置.

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

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

添加sass

然后安裝sass-loader.

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

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

rules: []

在它里面已經(jīng)配置了很多l(xiāng)oader包括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",
                    }),
                  ],
                },
              },
            ],
          },

就是這段代碼 它已經(jīng)給做了postcss后處理配置好了, postcss這里就不說(shuō)了,不了解的可以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跑起來(lái)的時(shí)候scss文件就可以編譯過(guò)去了 而且還做了后處理, 也不用自己去加一個(gè)前綴什么的.需要注意的是在build時(shí)不會(huì)去編譯 如果想build時(shí)也編譯的話. 在同級(jí)目錄中找到webpack.config.prod.js, 在它里面找到css的loader, 把編譯sass的loader放入相同的位置即可.

添加sass全局變量

在我們使用sass時(shí), 變量可以說(shuō)是離不開(kāi)的. 我們?cè)谑褂脮r(shí)每個(gè)需要用到的組件都需要去引入, 這樣很麻煩.

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

首先下載依賴包npm i sass-resources-loader --save-dev.
在上面添加scss規(guī)則的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就成為不需要引入就可以使用的全局變量了.

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/94109.html

相關(guān)文章

  • 初探react技術(shù)棧（一）

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

    劉玉平 評(píng)論0 收藏0

  • 初探React技術(shù)棧（一）

    react 最近已經(jīng)開(kāi)始使用react技術(shù)棧了，從頭開(kāi)始搭建項(xiàng)目，有必要的記錄一下配置的過(guò)程以及項(xiàng)目分層的思路，這次后臺(tái)項(xiàng)目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語(yǔ)言react-intl create-react-app 這是官方維護(hù)的腳手架應(yīng)用 我們一般也采用這個(gè) $ npm or cnpm $ npm install create-react...

    neroneroffy 評(píng)論0 收藏0

  • 指尖前端重構(gòu)（React）技術(shù)調(diào)研分析

    摘要：一為什么選擇是當(dāng)前前端應(yīng)用最廣泛的框架。目前來(lái)看的生態(tài)系統(tǒng)要比大的多，在等最大的技術(shù)社區(qū)搜索兩者，的搜索結(jié)果是的十倍左右，另外據(jù)近期統(tǒng)計(jì)使用的站點(diǎn)是的幾百倍以上。其中是基于技術(shù)，依然是瀏覽器應(yīng)用。 一、為什么選擇React React是當(dāng)前前端應(yīng)用最廣泛的框架。三大SPA框架 Angular、React、Vue比較。 Angular出現(xiàn)最早，但其在原理上并沒(méi)有React創(chuàng)新的性能優(yōu)化...

    AlphaWallet 評(píng)論0 收藏0

  • 通過(guò)create-react-app從零搭建react環(huán)境

    摘要：通過(guò)文件可以對(duì)圖標(biāo)名稱等信息進(jìn)行配置。注意，注冊(cè)的只在生產(chǎn)環(huán)境中生效，并且該功能只有在下才能有效果該文件是過(guò)濾文件配置該文件是描述文件定義了項(xiàng)目所需要的各種模塊，以及項(xiàng)目的配置信息比如名稱版本許可證等元數(shù)據(jù)。 一、 快速開(kāi)始： 全局安裝腳手架： $ npm install -g create-react-app 通過(guò)腳手架搭建項(xiàng)目： $ create-react-app 開(kāi)始項(xiàng)目： ...

    Cympros 評(píng)論0 收藏0

  • 通過(guò)create-react-app從零搭建react環(huán)境

    摘要：通過(guò)文件可以對(duì)圖標(biāo)名稱等信息進(jìn)行配置。注意，注冊(cè)的只在生產(chǎn)環(huán)境中生效，并且該功能只有在下才能有效果該文件是過(guò)濾文件配置該文件是描述文件定義了項(xiàng)目所需要的各種模塊，以及項(xiàng)目的配置信息比如名稱版本許可證等元數(shù)據(jù)。 一、 快速開(kāi)始： 全局安裝腳手架： $ npm install -g create-react-app 通過(guò)腳手架搭建項(xiàng)目： $ create-react-app 開(kāi)始項(xiàng)目： ...

    CoyPan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<