최근에 scss 파일을 컴파일 할 때 오류가 발생합니다. 오류 메시지는 다음과 같습니다.

Browserslist : caniuse-lite는 오래되었습니다. 다음 명령을 실행하십시오npm update caniuse-lite browserslist

첫째, 메시지에서 알 수 있듯이 실행 npm update caniuse-lite browserslist했지만 문제가 해결되지 않았습니다. 전체 nod-modules 디렉토리를 삭제하고 다시 설치했으며 전체 폴더를 업데이트 npm update했지만 어느 것도 문제를 해결하지 못했습니다. 또한 autoprefixer 및 browserslist를 다시 설치했지만 어느 것도 문제를 해결하지 못했습니다.

내가 제거하면

"options": {
      "autoPrefix": "> 1%"
    }

내 compilerconfig.json에서 모든 것이 잘 작동하므로 아마도 autoprefixer와 관련이 있음을 의미합니다. 또한 수동으로 패키지 버전을 최신 버전으로 변경 package.json하고 다시 설치했지만 운이 없습니다.

Visual Studio의 웹 컴파일러 확장을 사용하는 것 같습니다. 여기에 공개 된 문제가 있습니다 : https://github.com/madskristensen/WebCompiler/issues/413

해당 문제에 게시 된 해결 방법이 있습니다.

1. Visual Studio 닫기
2. 머리 C:\Users\USERNAME\AppData\Local\Temp\WebCompilerX.X.X(X는 WebCompiler의 버전입니다)
3. 에서 폴더 다음 삭제 node_modules폴더 : caniuse-lite및 browserslist 열기 CMD (내부에 C:\Users\USERNAME\AppData\Local\Temp\WebCompilerX.X.X) 및 실행 :npm i caniuse-lite browserslist

내 문제가 해결되었습니다. npx browserslist@latest --update-db

Angular 개발자 용

그러나 나는 이것에 대해 매우 늦게 대답하고 있습니다. 내가 사용하는 모든 라이브러리의 변경 로그를 확인하는 나쁜 습관이 있고 😀 Angular CLI의 릴리스 노트를 확인하면서이 문제를 해결하는 새 패치를 어제 (2020 년 1 월 9 일) 릴리스했다는 것을 알게되었습니다.

https://github.com/angular/angular-cli/releases/tag/v8.3.22

따라서를 실행할 때 다음에 ng update대한 업데이트를 받아야합니다 @angular/cli.

실행 ng update @angular/cli하면이 경고가 수정됩니다.

건배!

진행하는 대신 지름길을 찾았고이 cmd를 사용하여vs code appData/webCompiler 프로젝트에 대한 종속성으로 추가했습니다 . 그러나 각 프로젝트에 추가하지 않도록 전역 적으로 설치할 수 있습니다. npm i caniuse-lite browserslist

설치 후, 당신은 당신의 프로젝트에서 제거 할 수 package.json및 수행 npm i.

최신 정보:

위의 솔루션으로 해결되지 않은 경우. npm update더 이상 사용되지 않거나 오래된 패키지를 업그레이드하므로을 실행할 수 있습니다 .

노트 :

npm 업데이트를 실행 한 후 종속성이 누락 될 수 있습니다. 오류를 추적하고 누락 된 종속성을 설치하십시오. 내 것은 nodemon이었습니다.npm i nodemon -g

위 의 답변이 계속 됩니다.

@MehrdadBabaki와 동일한 "플러그인 오류"가 발생했습니다. 웹 컴파일러를 제거하고 위에서 언급 한 AppData WebCompiler 폴더를 삭제 한 다음 VS2019를 다시 열고 웹 컴파일러를 다시 설치했습니다.

그런 다음 WebCompiler 폴더로 다시 이동 npm i autoprefixer@latest npm i caniuse-lite@latest하여npm i caniuse-lite browserslist@latest

npm --depth 9999 update저를 위해 문제를 해결했습니다. 분명히 package-lock.json오래된 버전을 고집 했기 때문 입니다.

제 경우에는에서 caniuse-lite, browserslist폴더를 삭제했습니다 node_modules.

그런 다음 다음 명령을 입력하여 패키지를 설치합니다.

npm i -g browserslist caniuse-lite --save

잘 작동했습니다.

삭제 node_modules및 package-lock.json과 npm i나를 위해 문제를 해결한다.

Scott Kuhl의 답변에서 언급했듯이이 문제는 https://github.com/madskristensen/WebCompiler/issues/413에 언급되어 있습니다.

나를 위해 명령을 실행하는 npm i caniuse-lite- browserslist것은 하루에 약 1/2 동안 만 작동했지만 다시 문제가 발생했습니다.

게시물에 언급 된 다음 솔루션이 훨씬 더 잘 작동합니다. 이 오류를 반환 할 때 console.log대신 사용하도록 node.js 파일을 업데이트합니다 console.warn.

C : \ Users \ [사용자 이름] \ AppData \ Local \ Temp \ WebCompiler [VersionNumber] \ node_modules \ browserslist에있는이 파일을 수동으로 업데이트 할 수 있습니다.

또는 자동으로 수행되도록 다음을 수행하여 .csproj 파일에 다음을 추가합니다.

1. 프로젝트 파일을 마우스 오른쪽 버튼으로 클릭하고 "프로젝트 언로드"를 선택합니다.
2. .csproj 파일 편집
3. 프로젝트 파일에 다음을 붙여 넣습니다. 파일 </Project>끝 , 종료 태그 앞, 빌드 웹 컴파일러 패키지를 가져 오기 전에 붙여 넣었습니다 .

    <ItemGroup>
        <PackageReference Include="MSBuildTasks" Version="1.5.0.235">
            <PrivateAssets>all</PrivateAssets>
            <IncludeAssets>runtime; build; native; contentfiles; analyzers</IncludeAssets>
        </PackageReference>
    </ItemGroup>
    <PropertyGroup>
        <TempFolder>$([System.IO.Path]::GetTempPath())</TempFolder>
    </PropertyGroup>
    <ItemGroup>
        <BrowsersListNodeJsFiles Include="$(TempFolder)\WebCompiler*\node_modules\browserslist\node.js" />
    </ItemGroup>
    <Target Name="BrowsersListWarningsAsInfo" BeforeTargets="WebCompile">
        <FileUpdate Files="@(BrowsersListNodeJsFiles)"
                    Regex="console.warn"
                    ReplacementText="console.log" />
    </Target>

4. 프로젝트를 솔루션으로 다시로드하십시오.

단계적으로 수행하여이 문제를 해결했습니다.

1. 풀다 node_modules
2. 제거 package-lock.json,
3. 운영 npm --depth 9999 update
4. 운영 npm install

나도 같은 문제가 있었는데이 명령은 나를 위해 작동합니다.

npm i autoprefixer@latest

다음 package.json과 package-lock.json같은 파일에 종속성이 자동으로 추가되었습니다 .

package.json

"autoprefixer": "^9.6.5",

package-lock.json

"@angular-devkit/build-angular": {

...

"dependencies": {
    "autoprefixer": {
      "version": "9.4.6",
      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.4.6.tgz",
      "integrity": "sha512-Yp51mevbOEdxDUy5WjiKtpQaecqYq9OqZSL04rSoCiry7Tc5I9FEyo3bfxiTJc1DfHeKwSFCUYbBAiOQ2VGfiw==",
      "dev": true,
      "requires": {
        "browserslist": "^4.4.1",
        "caniuse-lite": "^1.0.30000929",
        "normalize-range": "^0.1.2",
        "num2fraction": "^1.2.2",
        "postcss": "^7.0.13",
        "postcss-value-parser": "^3.3.1"
      }
    },

...

  }

...

"autoprefixer": {
    "version": "9.6.5",
    "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.6.5.tgz",
    "integrity": "sha512-rGd50YV8LgwFQ2WQp4XzOTG69u1qQsXn0amww7tjqV5jJuNazgFKYEVItEBngyyvVITKOg20zr2V+9VsrXJQ2g==",
    "requires": {
      "browserslist": "^4.7.0",
      "caniuse-lite": "^1.0.30000999",
      "chalk": "^2.4.2",
      "normalize-range": "^0.1.2",
      "num2fraction": "^1.2.2",
      "postcss": "^7.0.18",
      "postcss-value-parser": "^4.0.2"
    },

...

}

내 문제가 어디에 있는지 정확히 모르겠지만 npm과 Yarn에서 동일한 글로벌 패키지를 사용했기 때문에 그랬다고 생각합니다.

모든 npm 전역 패키지를 제거한 다음 yarn 명령을 다시 사용할 때 문제가 사라졌습니다.

설치된 글로벌 패키지를 보려면 ...

npm의 경우 :

npm ls -g --depth=0

원사 :

yarn global list

그런 다음 npm 목록에서 본 각 패키지를 다음을 사용하여 제거했습니다.

npm uninstall -g <package-name>

Mac에서 node_modules 및 package-lock.json을 삭제 한 다음 npm install을 실행하여 문제를 해결했습니다.

노드 버전을 12에서 10으로 다운 그레이드했습니다.

편집하다

이 오류는 노드 버전 12를 사용했기 때문에 발생했습니다. 10.16.5 버전으로 다운 그레이드하면이 오류가 중지됩니다. 이 오류는 내 로컬 환경에서 발생했지만 제품 및 스테이징에서는 발생하지 않습니다. prod 및 스테이징 노드 버전은 10.x이므로이 작업을 수행하고 package.json의 패키지를 업데이트 할 필요가 없습니다.

문제를 해결하려면 아래 명령을 입력하십시오.

'npm -g 업데이트'

원사를 사용하는 경우 :

yarn upgrade

나를위한 도움

현재 프로젝트에서 나를 위해 일한 최소한의 솔루션

• Create-React-App 프로젝트
• Ubuntu / * nix
• 2020 년
• 노드 14.7

node_modules/browserslist프로젝트에서 디렉토리 삭제

지금

npm run build

더 이상 해당 메시지를 생성하지 않습니다.

제 경우에는 잘 작동합니다 ...

sudo npm i -g browserslist caniuse-lite