在react使用sass的情况下使用css modules

最新推荐文章于 2024-08-03 09:04:23 发布

sinat_33895623

最新推荐文章于 2024-08-03 09:04:23 发布

阅读量5.6k

点赞数 1

分类专栏：前端 css modules sass

本文链接：https://blog.csdn.net/sinat_33895623/article/details/82500350

版权

本文介绍了如何在React项目中结合Sass和CSS Modules进行开发，包括配置暴露、添加依赖、修改webpack配置以及展示了使用composes进行嵌套的注意事项。

摘要由CSDN通过智能技术生成

1. 暴露相关配置文件

yarn eject

2. 添加依赖

yarn add css-hot-loader node-sass sass-loader --dev

3. 修改config/webpack.config.dev.js文件

//声明ExtractTextPlugin插件
const ExtractTextPlugin = require("extract-text-webpack-plugin");
...
//在exclude中添加scss
{
    excluedes:[
        /\.html$/,
          /\.(js|jsx)$/,
          /\.css$/,
          /\.json$/,
          /\.bmp$/,
          /\.gif$/,
          /\.jpe?g$/,
          /\.png$/,
          /\.scss$/ //+++
    ]
   ...
}
...
//修改css的loader
{
        test: /\.css$/,
        use: ["css-hot-loader"].concat(
          ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: [
              {
                loader: "css-loader",
                options: {
                  modules: true,
                  localIdentName: "[name]__[local]___[hash:base64:5]"
                }
              },
              "postcss-loader"
            ]
          })
        )
}
...
//添加scss的loader
{
        test: /\.scss$/,
        use: ["css-hot-loader"].concat(
          ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: [
              {
                loader: "css-loader",
                options: {