CSS Loader Invalid Options 选项不应该有额外的属性

Question

这里是新的 nativescript-vue 开发人员...

当我运行我的正常构建例程时，我突然在每个 /components/*.vue 文件上得到 tns 构建错误：

$ rm -rf node_modules/ hooks/ platforms/ package-lock.json
$ tns build ios --bundle --env.config dev

错误

ERROR in ./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/vue-loader/lib??vue-loader-options!./components/Startup.vue?vue&type=style&index=0&lang=css&)
    
Module build failed (from ../node_modules/css-loader/dist/cjs.js):
ValidationError: CSS Loader Invalid Options

        
options should NOT have additional properties
        
at validateOptions (/Users/.../node_modules/css-loader/node_modules/schema-utils/src/validateOptions.js:32:11)
at 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

这似乎与 Nativescript 自带的 UglifyJsPlugin 有关。在我的 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
tns: 5.3.4
本机脚本：5.4.2

Answer 1

我没有使用 Vue 的经验，但是当我使用自定义 Webpack 配置更新 React 项目的依赖项时遇到了类似的问题。

CSS Loader 已更新至 3.0，并且他们对规范进行了一些更改。如果你有权访问 webpack 配置文件，你可能会看到类似这样的内容：

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

应该改成这样：

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

请注意，"..." 部分将是某种类似于 "[hash:base64:5]" 的模式，而不是字面上的 "..."。

这可能是也可能是特定问题，因为除此之外还有其他重大更改。您可以在此处找到重大配置更改列表：https://github.com/webpack-contrib/css-loader/releases

希望对您有所帮助！

Answer 2

我终于找到了解决方案，在这里发布给可能需要帮助的其他人。事实证明，根据 Nativescript，Webpack 需要升级。运行这成功了，让我再次构建和运行：./node_modules/.bin/update-ns-webpack --deps --configs

Answer 3

如果您使用的是 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 项目，您可能需要更新您的组件样式名称。 react-scripts 的较新版本更喜欢 [name].module.css 文件命名约定。

这 link 解释了如何。 https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet

CSS Loader Invalid Options 选项不应该有额外的属性

CSS Loader Invalid Options options should NOT have additional properties

webpack

nativescript-vue

错误