>

여기의 새로운 네이티브 스크립트-뷰 개발자 ...

정상적인 빌드 루틴을 실행할 때 모든 /components/*.vue 파일에서 갑자기 tns 빌드 오류가 발생합니다 :

  • $rm -rf node_modules/hooks/platforms/package-lock.json
  • $tns 빌드 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--1-!!../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
  • 단위 : 5.3.4
  • 네이티브 스크립트 : 5.4.2

  • 답변 # 1

    Vue에 대한 경험이 없지만 사용자 정의 웹팩 구성을 사용하여 React 프로젝트의 종속성을 업데이트 할 때 비슷한 문제가 발생했습니다.

    CSS 로더는 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

    에서 주요 구성 변경 목록을 찾을 수 있습니다.

    이것이 도움이되기를 바랍니다!

  • 답변 # 2

    Webpack css-loader 버전 ^ 3.0.0을 사용하는 경우, webpack.config를 약간 업데이트해야합니다.

    아래 코드에서 '여기 --->'를 기록하십시오. 이것이 도움이 되길 바랍니다.

    "..."
    
    

    또한 React 프로젝트로 작업하는 경우 컴포넌트 스타일 이름을 업데이트해야 할 수도 있습니다. 최신 버전의 반응 스크립트는 [name] .module.css 파일 명명 규칙을 선호합니다.

    이 링크는 방법을 설명합니다. https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet

  • 답변 # 3

    도움이 필요한 사람들을 위해 여기에 게시하여 해결책을 찾았습니다. Nativescript에 따르면 Webpack을 업그레이드해야한다고 밝혀졌습니다. 이것을 실행하면 트릭이 생겨서 다시 빌드하고 실행할 수있었습니다. ./node_modules/.bin/update-ns-webpack --deps --configs

    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'], }, };

  • 이전 python - 팬더에서 두 날짜 사이의 영업일 수를 얻는 방법
  • 다음 php - "더 이상 사용되지 않음 - mysql_connect ()"경고를 숨기는 방법?