ruby-on-rails - SassC::SyntaxError: 错误: 2rem/add 不是有效的 CSS 值

Question

在生产环境中编译资产时出现此错误。我一直在搜索它 2 天并尝试解决它来修复它。但还没有得到确切的解决方案。你能帮我解决一下吗？

我正在使用 ruby​​ 版本 - 2.6.3 rails - 6.2.3

而且我也在使用 webpacker。

错误

开发环境的application.css编译文件

我检查了这个错误，它已经出现在 node_modules/bootstarp/scss/mixins/_form.scss 文件中。

包.json

{
  "name": "xxx",
  "version": "2.0.0",
  "dependencies": {
    "@rails/webpacker": "4.3.0",
    "@yaireo/tagify": "^3.6.2",
    "axios": "^0.21.0",
    "bootstrap": "4.5.3",
    "bootstrap-datepicker": "^1.9.0",
    "bootstrap-vue": "^2.19.0",
    "chart.js": "^2.9.3",
    "clipboard": "^2.0.4",
    "code-prettify-google": "^1.0.1",
    "coffee-loader": "1.0.1",
    "coffeescript": "^2.5.1",
    "datatables.net": "^1.10.20",
    "datatables.net-bs4": "^1.10.20",
    "datatables.net-responsive-bs4": "^2.2.3",
    "dropzone": "^5.5.1",
    "jquery": "^3.4.1",
    "jquery-timepicker": "^1.3.3",
    "jquery-validation": "^1.19.1",
    "lib.sass": "^1.0.4",
    "magnific-popup": "^1.1.0",
    "nouislider": "^14.1.1",
    "quill": "^1.3.7",
    "sass": "^1.32.11",
    "select2": "^4.0.11",
    "simplebar": "^5.0.7",
    "slick-carousel": "^1.8.1",
    "summernote": "^0.8.18",
    "sweetalert2": "^9.7.2",
    "tinymce": "^5.4.1",
    "toastr": "^2.1.4",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.12",
    "vue-loading-overlay": "^3.4.2"
  },
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-file-include": "^2.1.0",
    "gulp-html-beautify": "^1.0.1",
    "gulp-minifier": "^3.4.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-strip-comments": "^2.5.2",
    "gulp-uglify": "^3.0.2",
    "gulp-watch": "^5.0.1",
    "resolve-url-loader": "^3.1.3",
    "uglify-js": "^3.7.7",
    "webpack-dev-server": "^3.11.2"
  }
}

还有我的 Gemfile

source 'https://rubygems.org' git_source(:github) do |repo_name|   repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/") "https://github.com/#{repo_name}.git" end

ruby '2.6.3'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails'
# gem 'bundler', '1.17.1'

# Use sqlite3 as the database for Active Record
# gem 'sqlite3'
# Use SCSS for stylesheets gem 'sassc' gem 'sass-rails', '>= 6'
# gem 'sass', '~> 3.7', '>= 3.7.4'
# Use Uglifier as compressor for JavaScript assets
# gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views gem 'coffee-rails'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer',  platforms: :ruby

# Use jquery as the JavaScript library gem 'jquery-rails'

gem 'webpacker', '~> 4.x'

# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
# gem 'spring',        group: :development

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use unicorn as the app server gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development gem 'activeadmin'

# Use debugger
# gem 'debugger', group: [:development, :test] gem 'devise' gem 'execjs' gem 'pg' gem 'therubyracer'

gem 'bootstrap-wysihtml5-rails'

# gem 'cardconnect', '~> 2.3.0' gem 'sparkpost_rails'

gem 'bigdecimal', '1.4.2' gem 'gaffe' gem 'rqrcode' gem 'signalwire' gem 'kaminari'

## fore remote true with file field gem 'remotipart', '~> 1.4', '>= 1.4.4'

gem 'rest-client' gem 'whenever', require: false

# gem 'openssl' gem 'puma'

## for logs gem 'silencer'

## login another user gem 'pretender'

## cors orign gem 'rack-cors', :require => 'rack/cors'

group :development do   gem 'byebug'   gem 'rails_layout'   gem "reline", "0.2.2" end

配置/webpack/environment.js

const { environment } = require('@rails/webpacker')

const customConfig = require('./custom')
const coffee = require('./loaders/coffee')

environment.loaders.append('coffee', coffee)
environment.config.merge(customConfig)

const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default'],
  // datetimepicker: 'eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js'
}))

// Get the actual sass-loader config
const sassLoader = environment.loaders.get('sass')
const sassLoaderConfig = sassLoader.use.find(function(element) {
  return element.loader == 'sass-loader'
})

// Use Dart-implementation of Sass (default is node-sass)
const options = sassLoaderConfig.options
options.implementation = require('sass')

module.exports = environment

标签： ruby-on-railssass