SASS внезапно перестал компилировать - PullRequest
Новая
       107

SASS внезапно перестал компилировать

0 голосов
/ 19 июня 2020

Я слежу за видео о создании собственной темы WordPress. До этого момента стили в моем файле _header.s css компилировались правильно, а затем просто перестали работать.

Я использую Visual Studio Code (который я перезапустил), MAMP и webpack. Каждый раз, когда я сохраняю изменение, я получаю сообщение, что сборка Laravel Mix прошла успешно. Ошибок нет.

Вот файлы, которые, я думаю, могут помочь. Не знаю, как это исправить. Имейте в виду, что это работало, пока я не попробовал стилизовать меню. Теперь ничего не работает. Я могу удалить все в этом файле, и страница не изменится в браузере.

_header.s css

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.s css

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

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

функций. 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',
  )
);

пакет. 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', './');

1 Ответ

0 голосов
/ 19 июня 2020

Установите лучший и лучший компилятор S CSS и попробуйте еще раз :( введите здесь описание ссылки

Надеюсь, это сработает, иначе дайте мне знать :)

...