Question

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

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

$ rm -rf node_modules / hooks / platform / package-lock.json
$ tns构建ios --bundle --env.config开发

./ 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＆）

模块构建失败（来自../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

这似乎与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

如果您使用的是Webpack css-loader版本^ 3.0.0，您将不得不稍微更新一下webpack.config。

请注意以下代码中的“此处--->”。希望这会有所帮助。

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

Answer 3

我终于找到了解决方案，在这里为其他可能需要帮助的人张贴。事实证明，根据Nativescript，Webpack需要升级。运行此功能可以解决问题，并允许我重新构建并运行：./node_modules/.bin/update-ns-webpack --deps --configs

CSS Loader无效选项选项不应具有其他属性

3 个答案: