如何解决SassError:纯 CSS 中不允许使用括号
Rails 6 中的 webpacker 新手,CSS 很烂
我正在尝试集成我购买的 bootstrap 4 主题:https://live.hasthemes.com/html/4/maxcoach-preview/maxcoach/index.html
我没有以任何方式修改代码。如果 CSS 不允许括号,那么... 耸肩
宝石文件
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '3.0.0'
# Bundle edge Rails instead: gem 'rails',github: 'rails/rails'
gem 'rails','~> 6.1.1'
# Use postgresql as the database for Active Record
gem 'pg','>= 0.18','< 2.0'
# Use Puma as the app server
gem 'puma','~> 4.1'
# Use SCSS for stylesheets
gem 'sass-rails','>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker','~> 4.3.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks','~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder','~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis','~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt','~> 3.1.7'
# Use Active Storage variant
# gem 'image_processing','~> 1.2'
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap','>= 1.4.2',require: false
gem 'bootstrap','~> 4.6'
...
我知道代码有效,因为它是购买的主题。我认为这与我的 package.json 和它的依赖关系有关,但我不知道我是否做对了。有人可以指出我正确的方向吗?或者知道这里发生了什么?
终端输出:
ERROR in ./app/javascript/stylesheets/application.scss
16:02:33 webpacker.1 | Module build failed (from
./node_modules/@rails/webpacker/node_modules/mini-css-extract-plugin/dist/loader.js):
16:02:33 webpacker.1 | ModuleBuildError: Module build failed (from ./node_modules/sass-
loader/dist/cjs.js):
16:02:33 webpacker.1 | SassError: Parentheses aren't allowed in plain CSS.
16:02:33 webpacker.1 | ╷
16:02:33 webpacker.1 | 5399 │ -ms-grid-columns: (1fr)[3];
16:02:33 webpacker.1 | │ ^
16:02:33 webpacker.1 | ╵
16:02:33 webpacker.1 | app/javascript/stylesheets/css/style.css 5399:21 @import
16:02:33 webpacker.1 | app/javascript/stylesheets/application.scss 13:9 root stylesheet
app/javascript/stylesheets/css/style.css 5399:21
.instagram-grid-wrap {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[3]; <--- here!
grid-template-columns: repeat(3,1fr);
grid-column-gap: 10px;
grid-row-gap: 10px; }
package.json
{
"name": "empowered_you","private": true,"dependencies": {
"@rails/actioncable": "^6.0.0","@rails/activestorage": "^6.0.0","@rails/ujs": "^6.0.0","@rails/webpacker": "4.3.0","bootstrap": "4.6.0","css-loader": "^5.0.1","jquery": "^3.5.1","loader-utils": "^2.0.0","mini-css-extract-plugin": "^1.3.5","node-sass": "^5.0.0","popper.js": "^1.16.1","sass": "^1.32.6","sass-loader": "^10.0.0","style-loader": "^2.0.0","turbolinks": "^5.2.0","webpack": "^4.27.0"
},"version": "0.1.0","devDependencies": {
"webpack-dev-server": "^3.11.2"
}
}
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,use: [
"style-loader","css-loader",{
loader: "sass-loader",options: {
implementation: require("sass"),sassOptions: {
fiber: false,},],};
javascript/stylesheets/application.scss
@import './css/plugins/aos.min';
@import './css/plugins/animate';
@import './css/plugins/ion.rangeSlider.min';
@import './css/plugins/jquery.animatedheadline';
@import './css/plugins/justifiedGallery.min';
@import './css/plugins/magnific-popup';
@import './css/plugins/selectric';
@import './css/plugins/plugins.min';
@import './css/plugins/swiper.min';
@import './css/style'; //<---here
@import './css/style.min';
@import './css/vendor/bootstrap.min';
@import './css/vendor/vendor.min';
@import './css/vendor/font-awesome-pro.min';
@import './css/vendor/font-gilroy';
@import './css/vendor/fonts-rossela';
@import './fonts';
javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
import '../stylesheets/application';
// import $ from 'jquery';
// import 'bootstrap/dist/js/bootstrap';
import '../vendor/bootstrap.bundle.min';
import '../vendor/jquery-3.4.1.min';
import '../vendor/jquery-migrate-3.1.0.min';
import '../vendor/modernizr-3.6.0.min';
import '../vendor/vendor.min';
import '../plugins/aos.min';
import '../plugins/countdown.min';
import '../plugins/gmap.min';
import '../plugins/imagesloaded.pkgd.min';
import '../plugins/ion.rangeSlider.min';
import '../plugins/isotope.pkgd.min';
import '../plugins/Jarallax.min';
import '../plugins/jquery.ajaxchimp.min';
import '../plugins/jquery.animatedheadline.min';
import '../plugins/jquery.counterup.min';
import '../plugins/jquery.justifiedGallery.min';
import '../plugins/jquery.magnific-popup.min';
import '../plugins/jquery.selectric.min';
import '../plugins/masonry.pkgd.min';
import '../plugins/parallax.min';
import '../plugins/plugins.min';
import '../plugins/rellax.min';
import '../plugins/sticky-sidebar';
import '../plugins/svg-inject.min';
import '../plugins/swiper.min';
import '../plugins/vivus.min';
import '../plugins/waypoints.min';
import './main';
$(document).on('turbolinks:load',function() {
$('body').tooltip({
selector: '[data-toggle="tooltip"]',container: 'body',});
$('body').popover({
selector: '[data-toggle="popover"]',html: true,trigger: 'hover',});
});
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
const images = require.context('../images',true)
const imagePath = (name) => images(name,true)
我是否缺少依赖项? 我应该关心的是我在 application.scss 中的导入顺序吗?
谢谢
解决方法
我建议你放弃 IE 支持并摆脱 -ms-grid-columns
。 grid-template-columns 目前具有广泛的浏览器兼容性,适用于 Edge。
也就是说,值 (1fr) 似乎应该没有括号。据我所知,没有任何使用括号的网格 css,即使它们在纯 css 中是绝对允许的,例如在 var()
和 calc()
中。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。