编译后的Sass奇怪地更改了类名，Webpack 2 ExtractTextPlugin

编译后的Sass奇怪地更改了类名是因为在使用Webpack 2的ExtractTextPlugin插件时，该插件会将CSS样式从JavaScript文件中提取出来，并生成一个单独的CSS文件。在这个过程中，可能会出现类名被奇怪地更改的情况。

这种情况通常是由于Webpack的CSS模块化功能导致的。CSS模块化是一种将CSS样式作用域限定在特定组件或模块中的技术，它可以防止样式冲突和全局污染。在Webpack中，CSS模块化可以通过配置CSS Loader来实现。

当使用ExtractTextPlugin插件提取CSS样式时，Webpack会将CSS模块化的类名进行处理，以确保它们的唯一性。这通常会导致类名被更改为一些奇怪的字符串，例如类似于"stylesclassName_hash"的形式。

尽管类名被更改了，但这不会影响样式的应用和渲染。因为在编译后的CSS文件中，类名已经被替换成了新的唯一标识符，而在HTML中使用的类名仍然是原始的类名。

解决这个问题的方法是在Webpack配置中添加CSS Loader的options选项，将模块化的类名保持原样。具体的配置如下：

module: {
  rules: [
    {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]___[hash:base64:5]'
            }
          },
          'sass-loader'
        ]
      })
    }
  ]
},
plugins: [
  new ExtractTextPlugin('styles.css')
]

在上述配置中，通过设置modules: true和localIdentName选项，可以保持类名的原始形式。localIdentName选项可以自定义类名的生成规则，上述配置中使用了类似于CSS模块化的命名规则。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云云数据库MySQL版等。你可以通过腾讯云官网获取更详细的产品介绍和相关链接地址。