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

【问题标题】：CSS Loader Invalid Options options should NOT have additional propertiesCSS Loader Invalid Options 选项不应该有额外的属性
【发布时间】：2019-11-02 18:36:15
【问题描述】：

这里有新的 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

【问题讨论】：

你似乎比我更熟练的开发人员，你为什么要删除所有这些文件？
我不知道更熟练...我只是为了确保在遇到构建问题时我有一个干净的石板。

标签： webpack nativescript-vue

【解决方案1】：

如果您使用的是 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 文件命名约定。

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

【讨论】：

【解决方案2】：

我没有使用 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

希望这会有所帮助！

【讨论】：

我的问题似乎特定于 uglifyjs-webpack-plugin，它包含在 nativescript 中。显然用 --env.uglify 打开它没有帮助。我将尝试将有关格式化的 cmets 应用到我自己的 webpack.config.js

【解决方案3】：

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

【讨论】：