Проект Vue.js - Сборка модуля завершилась неудачно с модулями CSS - PullRequest
Новая
       55

Проект Vue.js - Сборка модуля завершилась неудачно с модулями CSS

0 голосов
/ 30 октября 2019

У меня есть проект на Vue.js, и я планирую использовать модули CSS для своих локальных стилей (для sass и scss), но я продолжаю получать «Ошибка компиляции» в части проверки CSS Loader.

Я уже пробовал множество решений на Github, настраивая свой Webpack разными способами, но я продолжаю получать ту же ошибку.

Вот мой файл webpack.config.js в module.rules: 

    {
        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'
        ],
      },

И вот как я использую модули CSS для дочернего компонента в Vue: 

<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

Я надеюсь, что смогу устранить эту ошибку.

1 Ответ

0 голосов
/ 30 октября 2019

Согласно документации, оно должно быть: 

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