laravel - Bulma 样式覆盖不起作用;使用 Laravel 7.25.0
问题描述
我一直在使用 Bulma 作为我正在使用 Laravel 构建的网站的 CSS 框架,并且由于某种原因,我一直在编写的覆盖实际上都没有发生。事实上,如果我从我的 app.scss 文件中删除所有内容(包括导入 Bulma 的行),则没有任何变化。我尝试遵循为 node-sass 提供的文档,当我尝试执行npm css-build
命令时,出现以下错误:
> @ css-build /Users/userName/Sites/siteName
> node-sass --omit-source-map-url sass/app.scss css/app.css
An output directory must be specified when compiling a directory
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ css-build: `node-sass --omit-source-map-url sass/app.scss css/app.css`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ css-build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
我知道这可能是一个措辞糟糕的问题,但如果有人能指出我正确的方向,我将不胜感激。我只是真的迷路了。
应用程序.scss:
@charset "utf-8";
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
// Variables
@import "_variables";
// Font Awesome
@import "font-awesome/scss/font-awesome";
// Bulma
@import "bulma/bulma";
// Bulma Vue Modules
@import "buefy/src/scss/buefy";
// Other SCSS Files
@import "overrides";
@import "helpers";
@import "manage";
@import "styles";
package.json 的脚本部分:
"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",
"css-build": "node-sass --omit-source-map-url sass/app.scss css/app.css",
"css-watch": "npm run css-build -- --watch",
"start": "npm run css-watch"
},
解决方案
推荐阅读
- python - 使用 Python ftplib 上传后无法删除文件
- c++ - yaml-cpp 到 std::vector 迭代奇怪的行为
- javascript - javascript node.js 在这种情况下如何避免 While(true)?
- entity-framework - 如何更快地从 Linq 中的行中获取计数
- json - 有没有办法编辑 SharePoint 列表标题?
- javascript - Videojs和clappr livestream总是在livestream上打开,如何禁用?
- styled-components - React:通过样式组件将 box-sizing 应用于所有元素
- docker - Visual Studio Code 远程容器和 Go GOPATH
- laravel - 通过分页页面持久化查询数据
- file - 如何将 Google Sheets API 响应存储到文件