css-loader中$style.className被哈希字符串替换的问题

Question

源代码如下:

  .loaddingIcon {
    animation-name: TurnAround;
    animation-duration: 1.4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

引用方式如下:<span :class="$style.loaddingIcon">

编译后的css文件如下:

._2T2V2VXsWHYQ2aQBMM2e-A_0 {
  -webkit-animation-name: _1g9C9mDk5POVE0_5t1lg8y_0;
       -o-animation-name: _1g9C9mDk5POVE0_5t1lg8y_0;
          animation-name: _1g9C9mDk5POVE0_5t1lg8y_0;
  -webkit-animation-duration: 1.4s;
       -o-animation-duration: 1.4s;
          animation-duration: 1.4s;
  -webkit-animation-timing-function: linear;
       -o-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
       -o-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

html如下:

<span class="_2T2V2VXsWHYQ2aQBMM2e-A_0"></span>

那么问题出现了,

1. 原始css中的animation-name 'TurnAround'被替换了.....如此样式失效.
2. 若在原始css中使用引号将TurnAround括起来, 样式有效;然而编辑器却提示错误(处女座不能忍!!)

怎么办呢?

Answer 1

应该是webpack的样式加载模块造成的

看下一webpack.config.js里面的配置改成false就不替换了

  {
     loader: 'css-loader',
     options: {
               modules: false,
               }
    },