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

mindwind 发布于2019-08-22 16:10 / 2440人阅读

摘要：由于中没有内置或者这种预编译的工具这篇文章即为如何添加或者工具暴露配置首先全局下载创建一个项目然后暴露出的配置这里需要注意的是这个命令则是暴露出配置的命令添加然后安装找到文件中的中找到在它里面已经配置了很多

由于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语言中全局变量配置库文件中的变量全局变量全局变量操作

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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