美文网首页
React中配置Sass引入.scss文件无效

React中配置Sass引入.scss文件无效

作者: 程会玩_HUA | 来源:发表于2020-04-04 17:33 被阅读0次

    在react中使用sass时,引入.scss文件失效
    尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~

    在node_modules文件夹下,找到react-scripts ==> config文件夹, 在该配置文件夹下找到 webpack.config.dev.jswebpack.config.prod.js
    file-loader之前添加style-loader, css-loader, sass-loader
    代码如下:

              {
                test: /\.scss$/,
                loaders: ['style-loader', 'css-loader', 'sass-loader'],
              },
              // "file" loader makes sure those assets get served by WebpackDevServer.
              // When you `import` an asset, you get its (virtual) filename.
              // In production, they would get copied to the `build` folder.
              // This loader doesn't use a "test" so it will catch all modules
              // that fall through the other loaders.
              {
                // Exclude `js` files to keep "css" loader working as it injects
                // its runtime that would otherwise processed through "file" loader.
                // Also exclude `html` and `json` extensions so they get processed
                // by webpacks internal loaders.
                exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
                loader: require.resolve('file-loader'),
                options: {
                  name: 'static/media/[name].[hash:8].[ext]',
                },
              }
    

    相关文章

      网友评论

          本文标题:React中配置Sass引入.scss文件无效

          本文链接:https://www.haomeiwen.com/subject/mrgjphtx.html