为什么webpack + vue-loader + css-loader在编译结果中保留样式请求?

时间:2019-08-06 03:42:43

标签: webpack css-modules vue-loader

我的应用使用单个文件.vue组件。我使用Webpack进行捆绑,并使用vue-loader + css-loader生成css模块。

但是由于某种原因,捆绑包将请求保留在编译结果中,如下所示:

...
"../../../../vusion-cli-core/node_modules/icon-font-loader/src/fontface.css":function(e,t,s){},

"../../../../vusion-cli-core/node_modules/mini-css-extract-plugin/dist/loader.js!../../../../vusion-cli-core/node_modules/css-loader/dist/cjs.js?!../../../../vusion-cli-core/node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../vusion-cli-core/node_modules/icon-font-loader/index.js!../../../../vusion-cli-core/node_modules/postcss-loader/src/index.js?!../../../../vusion-cli-core/src/webpackConfigResolver/scenary/postcss/import-global-loader.js?!../../../../vusion-cli-core/node_modules/vue-loader/lib/index.js?!./src-vue/blocks/change.base.vue?vue&type=style&index=0&module=%24style&lang=css&"
:function(e,t,s){e.exports={config:"change-base_config_24nkHfV_"}}
...

这是webpack配置。

{
 ...
 module: {
    rules: [
    {
       test: /\.css$/,
        oneOf: [
        {
            resourceQuery: /module/,
            use: [
              MiniCssExtractPlugin.loader,

              {
                loader: 'css-loader',
                options: {
                  modules: {
                    mode: 'local',
                    localIdentName: '[name]_[local]_[hash:base64:8]'
                  },
                  importLoaders: 4,
                  sourceMap: false
                }
              },

              ....
         },
         ...

     ],
   },
   {
      test: /\.vue$/,
        use: [

          {
            loader: 'vue-loader'
          }
        ]
   }

  ....
}
...

我正在寻找一种将长字符串键省略或转换为哈希键的方法。

0 个答案:

没有答案