css - 为什么 scss 文件在 laravel 6 中不起作用？

Question

我通过 laravel 6 创建了一个网站，我正在尝试使用 scss，我安装了 nodjs，所以我在 root 中创建了一个 annonce.scss 文件resources / scss / page / annonce.scss，我添加@import 'page / annonce';了resources / sass / app.scss文件，然后我运行cmd npm run dev，但没有任何改变并npm run dev成功执行。

我不知道是否还有其他忘记添加的内容。

资源/scss/page/annonce.scss

.product-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 120px;
    padding: 100px 0 120px;

    .selected {
        border: 1px solid #979797;
    }
}

.product-section-images {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 20px;
    margin-top: 20px;
}

.product-section-thumbnail {
    display: flex;
    align-items: center;
    border: 1px solid lightgray;
    min-height: 66px;
    cursor: pointer;

    &:hover {
        border: 1px solid #979797;
    }
}

.product-section-image {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #979797;
    padding: 30px;
    text-align: center;
    height: 400px;

    img {
        opacity: 0;
        transition: opacity .10s ease-in-out;
        max-height: 100%;
    }

    img.active {
        opacity: 1;
    }
}
.product-section-information {
    p {
        margin-bottom: 16px;
    }
}

.product-section-title {
    margin-bottom: 0;
}

资源/sass/app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

// pages
@import 'page/annonce';

标签： csslaravelsass

Answer 1

确保您的 annouce 文件使用部分 scss 类型进行保存 ( _annonce.scss) 而不是 ( annonce.scss)，然后继续使用您的导入。

  // pages
  @import 'page/annonce';