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

我用laravel 6创建了一个网站，我试图使用scss，我安装了NodeJS，所以我在root

resources/scss/page/annonce.scss中创建了一个annonce.scss文件，我添加了
@import'page/annonce'
在
resources/sass/app.scss
文件中，然后运行
cmd npm run dev
，但不做任何更改，并且
npm run dev
成功执行

我不知道是否还有什么要补充的

resources/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;
}

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

// Variables
@import 'variables';

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

// pages
@import 'page/annonce';

资源/sass/app.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;
}

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

// Variables
@import 'variables';

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

// pages
@import 'page/annonce';

确保您的annouce文件正在使用部分scss类型进行保存（
\u annonce.scss
），而不是（
annonce.scss
），然后继续使用导入

//页
@导入“page/annonce”；