Параметры неверных опций загрузчика CSS НЕ должны иметь дополнительных свойств - PullRequest
Новая
       1

Параметры неверных опций загрузчика CSS НЕ должны иметь дополнительных свойств

2 голосов
/ 20 июня 2019

Новый разработчик nativescript-vue здесь ...

Я неожиданно получаю ошибки сборки tns для каждого файла /components/*.vue при запуске своей обычной процедуры сборки:

  • $ rm -rf node_modules / hooks / platform / package-lock.json

  • $ tns build ios --bundle --env.config dev

    ОШИБКА в ./components/Startup.vue?vue&type=style&index=0&lang=css& (../node_modules/nativescript-dev-webpack/style-hot-loader.js!../node_modules/nativescript-dev-webpack /apply-css-loader.js!../node_modules/css-loader/dist/cjs.js??ref--1-2!../node_modules/vueloader/lib/loaders/stylePostLoader.js!../ node_modules / вю-погрузчик / Lib ?? Vue-погрузчик-опция! ./ компоненты / Startup.vue? вя и типа = стиль и индекс = 0 & LANG = & CSS)

    Сбой сборки модуля (из ../node_modules/css-loader/dist/cjs.js): ValidationError: Недопустимые параметры загрузчика CSS

    опции НЕ должны иметь дополнительных свойств

    at validateOptions (/Users/.../node_modules/css-loader/node_modules/schema-utils/src/validateOptions.js:32:11) в Object.loader (/Users/.../node_modules/css-loader/dist/index.js:44:28) @ ./components/Startup.vue?vue&type=style&index=0&lang=css& 1: 0-371 1: 387-390 1: 392-760 1: 392-760 @ ./components/Startup.vue @ ./router/index.js @ ./app.js

Похоже, это связано с UglifyJsPlugin, который поставляется с Nativescript. В моем webpack.config.js: 

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
...
const config = {
        mode: mode,
        context: appFullPath,
        externals,
        ...
        minimize: Boolean(production),
        minimizer: [
                new UglifyJsPlugin({
                    parallel: true,
                    cache: true,
                    uglifyOptions: {
                        output: {
                            comments: false,
                        },
                        compress: {
                            // The Android SBG has problems parsing the output
                            // when these options are enabled
                            'collapse_vars': platform !== "android",
                            sequences: platform !== "android",
                        },
                    },
                }),
            ],

Я не знаю, почему это не удается. Окружающая среда:

  • OS X 10.14.5
  • тн: 5.3.4
  • nativescript: 5.4.2

Ответы [ 3 ]

1 голос
/ 27 июня 2019

Если вы используете Webpack css-loader версии ^ 3.0.0, вам придется немного обновить ваш webpack.config.

обратите внимание на 'Here --->' в коде ниже. Надеюсь, это поможет. 

module.exports = {
  entry: `${SRC_DIR}`,
  output: {
    filename: 'bundle.js',
    path: `${DIST_DIR}`,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'style-loader',
      },
      {
        test: /\.css$/,
        loader: 'css-loader',
        options: {
Here--->   modules: {
Here--->    mode: 'local',
Here--->    localIdentName: '[local]--[hash:base64:5]',
          },
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

Кроме того, если вы работаете с проектом React, вам может потребоваться обновить имя стиля компонента. более новые версии реакции-скриптов предпочитают соглашение об именах файлов [name] .module.css.

Эта ссылка объясняет как. https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet

1 голос
/ 21 июня 2019

У меня нет опыта работы с Vue, но у меня была похожая проблема, когда я обновлял зависимости моего проекта React, используя пользовательскую конфигурацию Webpack.

CSS Loader обновился до 3.0, и они изменили свои спецификациив некотором роде.Если у вас есть доступ к файлу конфигурации веб-пакета, вы, возможно, увидите что-то похожее на это: 

{
    loader: "css-loader",
    options: {
        modules: true,
        localIdentName: "..."
    }
}

И это должно быть изменено примерно так: 

{
    loader: "css-loader",
    options: {
        modules: {
            localIdentName: "..."
        }
    }
}

Обратите внимание, чтоЧасть "..." будет чем-то вроде "[hash:base64:5]", а не буквально "...".

Это может быть или может быть конкретной проблемой, поскольку помимо этого есть и другие критические изменения.Вы можете найти список критических изменений конфигурации здесь: https://github.com/webpack-contrib/css-loader/releases

Надеюсь, это поможет!

0 голосов
/ 21 июня 2019

Я наконец нашел решение, разместив здесь сообщения для тех, кому может понадобиться помощь. Оказывается, согласно Nativescript , Webpack нужно было обновить. Выполнение этого сделало свое дело и позволило мне снова собрать и запустить: ./node_modules/.bin/update-ns-webpack --deps --configs

...