SASS突然停止编译

Question

我正在关注创建自定义 wordpress 主题的视频。到目前为止，我的 _header.scss 文件中的样式编译正确，然后就停止工作了。

我正在使用 Visual Studio 代码（我重新启动了）、MAMP 和 webpack。每次我保存更改时，我都会收到 Laravel Mix 构建成功的消息。没有错误。

以下是我认为可能有用的文件。不知道如何解决这个问题。请记住，在我尝试设置菜单样式之前，这一直在起作用。现在什么都不管用了。我可以删除此文件中的所有内容，并且页面在浏览器中不会发生变化。

_header.scss

header {
  background: $light;
  padding: 1rem 0;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);

  .logo {
    width: 150px;
  }

  .menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

}

app.scss

@import 'node_modules/bootstrap/scss/bootstrap';

@import 'colors';
@import 'header';

functions.php

<?php

// Style Sheets
function load_stylesheets() { 
  wp_register_style ('stylesheet', get_template_directory_uri() . '/style.css', '', 1, 'all');
  wp_enqueue_style('stylesheet');

  wp_register_style ('custom', get_template_directory_uri() . '/app.css', '', 1, 'all');
  wp_enqueue_style('custom');
}

add_action('wp_enqueue_scripts', 'load_stylesheets');

// Javascript scripts
function load_javascript() {  
  wp_register_script ('custom', get_template_directory_uri() . '/app.js', 'jquery', 1, true);
  wp_enqueue_script('custom');
}

add_action('wp_enqueue_scripts', 'load_javascript');

// Add Menus
add_theme_support('menus');

// Register Menus
register_nav_menus(
  array(
    'top_menu' => 'Top Menu',
  )
);

package.json

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.19",
    "cross-env": "^7.0",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.13",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.15.2",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.11"
  },
  "dependencies": {
    "bootstrap": "^4.5.0",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1"
  }
}

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('src/app.js', './')
  .sass('src/app.scss', './');

Answer 1

安装更好最好的 SCSS 编译器然后重试:( enter link description here

我希望它有用，否则请告诉我 :)

SASS突然停止编译

SASS suddenly stopped compiling

css

sass

node-sass

webpack