3

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

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

$ 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

这似乎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
  • 本机脚本：5.4.2
4

3 回答 3

2

如果您使用的是 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

于 2019-06-27T10:21:33.973 回答
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

希望这可以帮助！

于 2019-06-21T05:01:52.467 回答
0

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

于 2019-06-21T13:53:01.517 回答