Vue.js 項目 - CSS 模塊的模塊構建失敗

Question

I have a project on Vue.js and I plan to use CSS modules for my local styles (for sass and scss), but I keep on getting a 'Failed to compile error' on the CSS Loader validation part.

通過以多種方式配置我的 Webpack，我已經在 Github 上嘗試了很多解決方案，但我一直遇到同樣的錯誤。

這是我在 module.rules 下的 webpack.config.js 文件：

    {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          {
            loader: "css-loader",
            options: {
              modules: {
                localIdentName: 'MyApp__[local]--[hash:base64:5]',
              },
            }
          },
          'sass-loader'
        ],
      },
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          {
            loader: "css-loader",
            options: {
              modules: {
                localIdentName: 'MyApp__[local]--[hash:base64:5]',
              }
            }
          },
          'sass-loader?indentedSyntax'
        ],
      },

這就是我在 Vue 的子組件上使用 CSS 模塊的方式：

<style lang="scss" module>
.subtitle{
    font-size: 1rem !important;
}
.box{
    padding: 20% 0 !important;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
}
</style>

這是我得到的完整錯誤：

ERROR in ./node_modules/css-loader/dist/cjs.js?{"localIdentName":"[hash:base64]_0","importLoaders":true,"modules":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-68c39e04","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!
Module build failed: ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'localIdentName'. These properties are valid:
   object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals? }
    at validate

我希望我能解決這個錯誤。

Answer 1

不幸的是，來自 css-loader 的getLocalIdent選項不適用於vue-loader處理的 CSS 。

正如 Vue.js 的作者Evan You所說：

“這是因為vue-loader 加載程序的查詢必須被字符串化，所以 function 選項在此過程中被刪除”

您可以在此處閱讀有關可能對您有用的解決方法的更多信息： https://medium.com/@my_own_grave/reducing-css-generated-by-vue-loader-by-using-classnames-shorten-trick-aa1d25d77473 ？

(,) 但是，我剛剛找到了一個更好的解決方法並在我們的項目中成功實現了它：如果您使用 Webpack 4，您可以輕松地將模塊內部的 localIdentName 作為 object 傳遞，如下所示：

use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: { localIdentName: '[name]_[local]_[hash:base64:5]' }
            }
          },
          'sass-loader'
        ]

Answer 2

根據文檔，它應該是：

  options: {
    modules: true,
    localIdentName: 'MyApp__[local]--[hash:base64:5]'
  }