Question

./ src / assets / scss / styles.scss中的错误（./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./ node_modules / postcss-loader / src嵌入！./ node_modules / sass-loader / dist / cjs.js ref--14-3！./ src / assets / scss / styles.scss）模块构建失败（来自./node_modules/sass-loader/dist/cjs.js）：

.close-button {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: red;
    text-align: center;
    cursor: pointer;
    white-space: nowrap
  }
  
  .topright {
    position: fixed!important;
    right: 20px;
    top: 20px;
  }
  
  
  * {
    z-index: 1;
    margin:0;
    padding:0;
  }
  
  
  
  body, html{
  font-size: 16px;
  }
  
  
  /*container-video*/
  /*container-video*/
  /*container-video*/
  /*container-video*/
  /*container-video*/
  /*container-video*/
  .img-container { 
     display: flex;
     height: 100vh;
      justify-content: center;
    align-items: center;
    padding:20px;  
     background-color: white;
     justify-content: center;  
     z-index:0;
  
  }
  @media only screen and (max-width:800px){
  .img-container  {
         padding:20px;  
         height: 80vh;   
  }
  }
  
  @media only screen and (max-width:450px){
  .img-container  {
       padding:20px; 
        height: 82vh;   
  }
  }
  #uno{background:purple;}
  #due{background: yellow;}
  #tre{background:black;}
  
  
  img {
     position:absolute;
    border-radius: 20px;
     height:100%;
     z-index:0;
  }
  
  @media only screen and (max-width:800px){
          img {
          width:95%;
             height:80%;
          object-fit: cover;
  }
  }
  
  @media only screen and (max-width:450px){
      img {
          width:95%;
          height:100%;
          object-fit: cover;
  }
  }
  
  
  
  
  
  .sticky {
    position: -webkit-sticky;
    position: sticky;
    bottom: 20px;  
    right:20px;
    justify-content: space-between;
    align-self: flex-end;
    margin-left: auto;
  }
  
  
  .sticky-button {  
    background: none;
    -webkit-font-smoothing: antialiased;
    -webkit-box-shadow:0 0px 7px rgba(0,0,0,0.4);
      box-shadow:0 0px 7px rgba(0,0,0,0.4);
    /*padding: 6px 10px;*/
    color:white;
    font-family:helvetica;
    font-weight:600;
    font-size: 1rem;
    border-radius: 24px;
    width: auto;
  }
  
  
  @media only screen and (max-width:800px){
  .sticky-button {
       width: auto;
      font-size: 0.8rem;
    
     }
  }
  @media only screen and (max-width:450px){
  .sticky-button {
      width: auto;
      font-size: 0.8rem;
    
     }
  }
  
  
  .sticky-button-description {
     color: hsla(0,0%,100%,.75);
      font-size: 12px;
      line-height: 1.4em;
      letter-spacing: normal;
      font-size: 12px;
      line-height: 1.4em;
      font-weight:400;
  
     font-family:helvetica;
     display:inline;
      letter-spacing: normal;
    }
  @media only screen and (max-width:450px){
  .sticky-button-description{
      
     }
  }
  .sticky-button-break {
     padding:0.3rem;
    }
  /*container-video*/
  /*container-video*/
  /*container-video*/
  /*container-video*/
  /*container-video*/
  /*container-video*/
  
  
  
  
  
  
  
  .break{height:200px;
     width:100%;
     background:black;
    margin:0;
    padding:0;}
  
  .break-2{height:900px;
     width:100%;
     background:red;
    margin:0;
    padding:0;}
  
  
  
  
  
  
  
  
  
  
  
  
  
  .btn-1 {
      border: none;
      border-radius: 24px;
      color: white;
      background-color:#3E3E3E;
      padding: 10px 18px;
      font-size: 16px;
    width: 100%;
      cursor: pointer;
      outline: none;
      overflow: hidden;
      box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
      transition: transform .3s ease;
       z-index:2;
  }
  
  .btn-1:active {
      transform: scale(10.9);
     opacity:0;
      z-index:20;
        transition: transform .3s ease;
      z-index:100;
   
  }
  
  
  .btn-2 {
      border: none;
      border-radius: 24px;
      color: white;
      background-color:#3E3E3E;
      padding: 10px 18px;
      font-size: 16px;
    width: 100%;
      cursor: pointer;
      outline: none;
      overflow: hidden;
      box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
      transition: transform .3s ease;
     z-index:50;
  
  }
  
  .btn-2:active {
    position:sticky;
      transform: scale(10.9);
    z-index:50;
     
  }
  
  .btn-3 {
      border: none;
      border-radius: 24px;
      color: white;
      background-color:#3E3E3E;
      padding: 10px 18px;
      font-size: 16px;
    width: 100%;
      cursor: pointer;
      outline: none;
      overflow: hidden;
      box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
      transition: transform .3s ease;
      z-index:30;
   
  }
  
  .btn-3:active {
      transform: scale(10.9);
     z-index:30;
  
  }
  
  
  /* Modal */
  .overlay {
     position: fixed;
    overflow: hidden;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: black;/*rgba(0, 0, 0, .55);*/
    pointer-events: none;
    z-index: 5;
  }
  
  
  .overlay, .modal {
    opacity: 0;
    transition: .5s;
  }
  
  .overlay--open {
    opacity: 1;
   
    pointer-events: auto;
  }
  
  .overlay--open .modal {
    opacity: 1;
  
    transform: none;
  }
  
  .modal {
    position: fixed;
  
    width: 100%;
    margin: 15vh auto 0;
    background: black;
    color:#fff;
    transform: translateY(80%) scale(.8);
    transition-timing-function: cubic-bezier(.3, 0, 0, 1.3);
    transition-delay: .4s;
    text-align: center;
      font-size: 26px;
    font-weight:400;
  }
  /*MODAL TRIGGER*/
  /*MODAL TRIGGER*/

下面是package.json

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, height=device-height, width=device-width, maximum-scale=1">
    <meta name="description" content="CAT is a designer and art director" />
</head>
<body>
    <div class="img-container" id="uno">
        <img src="https://assets.vogue.com/photos/5cd30b6bd2f46d2eca29ab09/master/w_2560%2Cc_limit/virgil-abloh-vogue-june-2019-issue.jpg"
            alt="Smiley face">
        <div class="sticky">
            <div class="sticky-button">
                <button class='btn-1 modal-btn'>Open Modal</button>
            </div>
        </div>
        <!--MODAL-1-->
        <div class="overlay" id="YourModalBox">
            <span class="close-button topright">&times;</span>
            <div class="modal"><span>
                    Title Description-1 ? ?<br>
                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
                    aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                    voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
                    voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
                    ratione voluptatem sequi nesciunt</span></div>
        </div>
        <!--MODAL-1-->
    </div>

    <div class="img-container" id="due">
        <img src="https://i.pinimg.com/originals/90/ec/76/90ec76614129cba11f178821e59a99f8.jpg" alt="Smiley face">
        <div class="sticky">
            <div class="sticky-button">
                <button class='btn-2 modal-btn'>Karl info</button>
            </div>
        </div>
        <!--MODAL-2-->
        <div class="overlay" id="YourModalBox2">
            <span class="close-button topright">&times;</span>
            <div class="modal"><span>
                    Title Description-1 ? ?<br>
                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
                    aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                    voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
                    voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
                    ratione voluptatem sequi nesciunt</span></div>
        </div>
        <!--MODAL-2-->
    </div>

    <div class="img-container" id="tre">
        <img src="https://media.gq.com/photos/5da1fd854e024d0009825bfd/4:3/w_2520,h_1891,c_limit/pharrell-williams-cover-gq-november-2019-02-16x9.jpg"
            alt="Smiley face">
        <div class="sticky">
            <div class="sticky-button">
                <button class='btn-3 modal-btn'>Tomoaki Nagao info</button>
            </div>
        </div>
        <!--MODAL-3-->
        <div class="overlay" id="YourModalBox3">
            <span class="close-button topright">&times;</span>
            <div class="modal"><span>Title Description-3 ? ?<br>"Sed ut perspiciatis unde omnis iste natus
                    error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
                    ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
                    magni dolores eos qui ratione voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo.
                    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                    consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</span></div>
        </div>
        <!--MODAL-3-->
    </div>


    <!-- REMOVE!! -->
    <div class="break-2"></div>
    <!-- REMOVE!! -->
</body>
</html>

Answer 1

尝试以下步骤；

尝试1

npm安装node-sass

尝试2

删除node_modules文件夹并运行npm install

尝试3

npm重建node-sass

尝试4

npm install --save node-sass

Answer 2

您需要将引导程序降级到4.3.1 脚步： 1.删除引导程序-npm uninstall bootstrap 2.安装Bootstrap 4.3.1-npm install bootstrap@4.3.1

Answer 3

不清楚在发生此错误之前您做了什么。请尝试更具体。至于这个通用问题，这里是通用答案：

检查是否从正确的位置运行npm install。这很明显，但是有些事情发生了。
确保从正确的文件夹运行npm start。
寻找“ $ grid-row-columns”的定义，我的意思是_grid-framework.scss在定义此变量时很可能引用其他文件。

祝你好运！

npm开始获取sass-loader错误时出错

3 个答案: