GVKun编程网logo

将Sass（.scss）添加到弹出的create-react-app配置中（sass @content）

11

以上就是给各位分享将Sass，其中也会对.scss添加到弹出的create-react-app配置中进行解释，同时本文还将给你拓展2019最新create-react-app创建的react中使用sa

以上就是给各位分享将Sass，其中也会对.scss添加到弹出的create-react-app配置中进行解释，同时本文还将给你拓展2019最新create-react-app创建的react中使用sass/scss,以及在react中使用sass/scss公共变量的方法、create-react-app 中添加sass less以及配置全局变量、create-react-app 如何使用 less，sass 和 react-css-modules?、create-react-app 添加less-css-modules等相关知识，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

将Sass（.scss）添加到弹出的create-react-app配置中（sass @content）

将Sass（.scss）添加到弹出的create-react-app配置中（sass @content）

我想.scss在使用create-react-app创建的应用程序中添加支持。

我确实弹出npm run eject并安装了必要的依赖项：npm install sass-loader node-sass --save-dev

在内部，config/webpack.config.dev.js我将此片段添加到了加载器中：

{   test: /\.scss$/,   include: paths.appSrc,   loaders: ["style", "css", "scss"]},

因此，加载程序数组的开始看起来像这样：

loaders: [      // Process JS with Babel.      {        test: /\.(js|jsx)$/,        include: paths.appSrc,        loader: ''babel'',        query: require(''./babel.dev'')      },      // "postcss" loader applies autoprefixer to our CSS.      // "css" loader resolves paths in CSS and adds assets as dependencies.      // "style" loader turns CSS into JS modules that inject <style> tags.      // In production, we use a plugin to extract that CSS to a file, but      // in development "style" loader enables hot editing of CSS.      {        test: /\.css$/,        loader: ''style!css!postcss''      },      // LOAD & COMPILE SCSS      {        test: /\.scss$/,        include: paths.appSrc,        loaders: ["style", "css", "scss"]      },

现在在我的jsx中，当我尝试导入scss文件时：

import ''./assets/app.scss'';

我收到一个错误：

未捕获的错误：找不到模块“ ./assets/app.scss”

所以我的配置一定是错误的，因为我无法加载.scss文件。如何调整配置以加载.scss弹出文件create-react-app？

答案1

小编典典

好的，我找到了解决方案-与此不同：

{    test: /\.scss$/,    include: paths.appSrc,    loaders: ["style", "css", "scss"]},

对此：

{    test: /\.scss$/,    loaders: [''style'', ''css'', ''sass'']},

现在我的.scss文件正在加载！

2019最新create-react-app创建的react中使用sass/scss,以及在react中使用sass/scss公共变量的方法

2019最新create-react-app创建的react中使用sass/scss,以及在react中使用sass/scss公共变量的方法

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
链接： https://www.jianshu.com/p/8c577509079f     
来源：简书
如果需要定于全局的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月
 
 
 
 
 
 
 

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

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

由于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就成为不需要引入就可以使用的全局变量了.

create-react-app 如何使用 less，sass 和 react-css-modules?

create-react-app 如何使用 less，sass 和 react-css-modules?

  • create-react-app 如何使用 less？
  • create-react-app 如何使用 sass？
  • create-react-app 如何使用 react-css-modules？

Thanks @pengzeya

1.create-react-app 如何使用 less？

安装 less-watch-compiler 到开发依赖。

1
 
npm i less-watch-compiler --save-dev

添加 scripts

1
2
3
4
 
"scripts": {
  "build-css": "less-watch-compiler --run-once --main-file=index.less src/less src/css",
  "watch-css": "npm run build-css && less-watch-compiler --main-file=index.less src/less src/css"
}

运行命令

1
 
npm run watch-css

运行结果
创建 css 目录并生成编译后的 index.css 文件

1
 
src/less/index.less    →    src/css/index.css

程序运行起来后，会监控对应目录下的.less 文件，热更新到 css 目录下。

参考：https://github.com/facebook/create-react-app/issues/3457

2.create-react-app 如何使用 sass？

安装 node-sass-chokidar 到依赖

1
 
npm install --save node-sass-chokidar

添加 scripts

1
2
 
"build-css": "node-sass-chokidar src/sass -o src/css",
"watch-css": "npm run build-css && node-sass-chokidar src/sass -o src/css --watch --recursive",

运行命令

1
 
npm run watch-css

运行结果
创建 css 目录并生成编译后的 index.css 文件

1
 
src/sass/index.scss    →    src/css/index.css

程序运行起来后，会监控对应目录下的.scss 文件，热更新到 css 目录下。

参考：https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc

3.create-react-app 如何使用 react-css-modules？

暴露出配置文件：

1
 
npm run eject

运行 eject 命令后，CRA 会自动把 wepack 中与 css-modules 相关的依赖为我们准备好，无需新增多余的依赖。

修改 config/webpack.config.dev.js：

大专栏 create-react-app 如何使用 less，sass 和 react-css-modules? <  /tr> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
// 修改前
{
  loader: require.resolve(''css-loader''),
  options: {
    importLoaders: 1,
  },
},
// 修改后
{
  loader: require.resolve(''css-loader''),
  options: {
    importLoaders: 1,
    modules: true,
    localIdentName: "[name]__[local]___[hash:base64:5]"  
  },
},

修改 config/webpack.config.prod.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
// 修改前
{
  loader: require.resolve(''css-loader''),
  options: {
    importLoaders: 1,
    minimize: true,
    sourceMap: true,
   },
},
// 修改后
{
  loader: require.resolve(''css-loader''),
  options: {
    importLoaders: 1,
    modules: true,
    minimize: true,
    sourceMap: true,
   },
},

代码变化：
引入 CSS Modules 之前:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
import React, { Component } from ''react'';
import logo from ''./logo.svg'';
import ''./foo.css'';
class App extends Component {
  render() {
    return (
      <div className="bar">

      </div>
    );
  }
}
export default App;

引入 CSS Modules 之后：

1
2
3
4
5
6
7
8
9
10
11
12
13
 
import React, { Component } from ''react'';
import logo from ''./logo.svg'';
import foo from ''./foo.css'';
class App extends Component {
  render() {
    return (
      <div className={foo.bar}>

      </div>
    );
  }
}
export default App;

添加 css-modules 之前：

1
2
3
4
 
.bar{
    display: block;
    background: yellow;
}

添加 css-modules 之后：

1
2
3
4
 
.foo__bar__1t6eA{
    display: block;
    background: yellow;
}

运行结果

1
 
.bar   →    foo__bar__1t6eA

注意事项：

  • 将 import 进来的’./SomeComponent.css’分配给一个本地常量，例如，import foo from ‘./foo.css’;
  • 在 JSX 中将 className 替换成的形式 {styles.myClass}，例如，className={styles.myClass}.
  • 需要修改 CSS 文件和 JSX 中的 class 名。因为 CSS Modules 不允许”-“出现在类名中，有过开发经验的朋友都知道，正则中有”word” 与”none-word” 之分，word 包括 0~9,a~z 以及下划线。而”-“不属于单词，因此 CSS Modules 不支持。例如我们需要将.Foo.bar 修改为.bar，某些方面也简化了我们的代码。使用 CSS Modules 之后，我们就不需要再使用 BEM 之类的 CSS 规范。

参考：https://medium.com/nulogy/how-to-use-css-modules-with-create-react-app-9e44bec2b5c2

create-react-app 添加less-css-modules

create-react-app 添加less-css-modules

  1. create-react-app demo
  2. npm run eject
  3. npm i less less-loader --save
  4. npm i less-watch-compiler --save-dev

  5. 在package.json 中添加

       "scripts":{ 
      "build-css": "less-watch-compiler --run-once --main-file=index.less src/less src/css",
       "watch-css": "npm run build-css && less-watch-compiler --main-file=index.less src/less src/css"
    }
  6. 运行npm run watch-css

  7. 在config 中的 webpack.config.js 中配置

       // 修改前
   {
     loader: require.resolve(''css-loader''),
     options: cssOptions
   },
   // 修改后
   {
     loader: require.resolve(''css-loader''),
     options: {
       importLoaders: 1,
       modules: true,
       localIdentName: "[name]__[local]___[hash:base64:5]"     // 更改css modules 生成方法
     },
   },
   // 修改webpack 配置less 部分， 按照sass 相同配置
    const lessRegex = /\.less$/
    const lessModuleRegex = /\.module\.less$/ 
    oneOf:[
           ...,
           {
             test: lessRegex,
             use: getStyleLoaders(
               {
                 importLoaders: 2,
                 sourceMap: isEnvProduction
                   ? shouldUseSourceMap
                   : isEnvDevelopment,
               },
               ''less-loader''
             )
           },
           {
             test: lessModuleRegex,
             use: getStyleLoaders(
               {
                 importLoaders: 2,
                 sourceMap: isEnvProduction
                   ? shouldUseSourceMap
                   : isEnvDevelopment,
                 modules: true,
                 getLocalIdent: getCSSModuleLocalIdent
               },
               ''less-loader''
             ),
             sideEffects: true
           },
       ]

8.删除原有依赖 重新安装依赖， 然后npm start 运行即可

关于将Sass和.scss添加到弹出的create-react-app配置中的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于2019最新create-react-app创建的react中使用sass/scss,以及在react中使用sass/scss公共变量的方法、create-react-app 中添加sass less以及配置全局变量、create-react-app 如何使用 less，sass 和 react-css-modules?、create-react-app 添加less-css-modules的相关知识，请在本站寻找。

本文标签：

上一篇我们可以在react webapp和react native应用之间共享代码吗？（react数据共享）

下一篇使用React Native隐藏状态栏（react native 状态栏）

相关文章