creact-react-app 中引入scss步骤

1,677 阅读1分钟

一、安装依赖 node-sass sass-loader

yarn add sass-loader node-sass -D

如果node-sass安装失败,使用

yarn config list

查看配置registry 指定是否国内淘宝,不是的话,执行

yarn config set registry https://registry.npm.taobao.org -g 

再次安装 node-sass sass-loader 依赖

二、安装成功之后

通过以下路径找到配置文件:

node_modules/react-scripts/config/webpack.config.js

line:549 行中添加匹配scss正则
eg:exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/,/\.scss$/],

最后添加loader配置

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

以上两步完成,搞定。重启见效果O(∩_∩)O哈哈~