TSX-VUE开发方式中 Webpack 中结合SCSS配置使用CSS module

webpack 配置项

image.png

{
        test: /\.css|scss$/,
        // use: 'sass-loader'
        loader: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                modules: true,
                importLoaders:1,
                localIdentName: '[name]__[local]-[hash:base64:5]'
                // localIdentName: '[name]__[local]-[hash:base64:5]'
              }
            },
            "sass-loader",
          ],
          fallback: "style-loader",
        })
      },

组件中使用

image.png

第一步 在所用的组件中import 要使用的样式文件

第二步 在组件的dom 中添加 class={ ${style.xxxx} }

这里的style 对应上面的import ,xxxx 对应 style.scss 中的类名 如test

image.png

image.png

如果ts版本遇到其他问题可以在项目添加declaration.d.ts 文件尝试

image.png