如果使用webpack，则可以使用sass-loader导出如下变量：

$animation-length-ms: $animation-length + 0ms;

:export {
  animationMillis: $animation-length-ms;
}

然后把它们

import styles from '../styles/animation.scss'    
const millis = parseInt(styles.animationMillis)

https://blog.bluematador.com/posts/how-to-share-variables-between-js-and-sass/

我认为我的解决方案相当做作;但它确实起作用了。
在我的_base.scss中，我定义了一些变量：

$menu_bg: rgb(45, 45, 45);
$menu_hover: rgb(0, 0, 0);

在menu.scss中，我有：

@import "base";

#jquery_vars {
  .menu_bg {
    background-color: $menu_bg;
  }
  .menu_hover {
    background-color: $menu_hover;
  }
}

在一个方便的页面模板中：

<span class="is_hidden" id="jquery_vars">
  <span class="is_hidden menu_bg"></span>
  <span class="is_hidden menu_hover"></span>
</span>

最后，这允许在附近的jQuery脚本中：

var menu_bg = $('#jquery_vars .menu_bg').css("background-color");
var menu_hover = $('#jquery_vars .menu_hover').css("background-color");

太丑了，我爸头上套着个袋子。
jQuery可以从页面元素中提取任意CSS值;但这些元素必须存在。我确实尝试过从原始CSS中提取一些值，但没有在HTML中创建span，jQuery提出了undefined。显然，如果这些变量被赋给页面上的“真实的”对象，您实际上并不需要任意的#jquery_vars元素。同时，人们可能会忘记.sidebar-left nice-menu li是用于向jQuery提供变量的重要元素。
如果有人有别的东西，肯定比这干净...

sass-ffi应该可以完成这个任务，但方法相反（从JS到SASS/SCSS），它将定义一个名为ffi-require的函数，该函数允许您从SASS：
config.js：

module.exports = {
     maxColumns: 4,
};

style.scss：

$max-columns: ffi-require('./config', 'maxColumns');

与sass-loader（网络包）和node-sass一起使用。

您可以使用服务器端脚本读取sass文件，“解析”它并回显您需要的javascript值。

我想补充的是，现在有几种方法可以使用JSON在Sass和JavaScript之间共享数据。下面是一些详细介绍各种技术的文章的链接：

• Making Sass talk to JavaScript with JSON
• SassyJSON: Talk to the browser
• Sharing Data Between Sass and JavaScript with JSON

JSON导入在Sass中得到原生支持可能只是时间问题。

我建议查看sass-extract，它使用原生sass特性将计算出的变量值提取到JSON中。
此外，如果您使用webpack，sass-extract-loader将使您非常容易地只需要/导入const variables = require('sass-extract-loader!./variables.scss');中的sass文件，并将sass变量放在一个漂亮的JSON对象中。
因为它也支持@import语句，所以你仍然可以将变量分隔在不同的文件中，而不需要添加额外的预处理或将json文件与变量分隔开。
正如在其他答案中提到的，有许多替代方法可以实现这一点，您选择哪一种将取决于您的用例和环境。
免责声明，我是这两个库的作者。

另一种方法是使用gulp-template，这样就可以为JavaScript生成任何结构。
使用带有gulp模板https://youtu.be/UVeUq8gMYco的Gulp在Javascript和Sass之间共享变量
它是从零开始创建的，所以人们可以从头看到它，并且有一个git repo，其最终结果是：
https://github.com/PocketNinjaCoUk/shared-js-sass-vars-using-gulp/tree/master/dev

你基本上有了你的配置对象

保存在./dev/config.js

module.exports = {
  defaults: {
    colours: {
      primary: '#fc0'
    },
    sizes: {
      small: '100px',
      medium: '500px',
      large: '1000px'
    },
    zIndex: {
      model: 100,
      dropdown: 50,
      header: 10
    }
  }
}

然后您就有了Sass和Javascript的模板，或者更少的模板，或者任何您想要的模板。

Sass下划线模板

保存在./dev/templates/sass-config.txt中

<% _.each(defaults, function(category, key) { %>
  // Var <%= key %>
  <% _.each(category, function(value, key) { %>
    $<%= key %>: <%= value %>;
  <% }) %>
<% }) %>

Javascript下划线模板

保存在./dev/templates/js-config.txt中

namespace.config = {};

<% _.each(defaults, function(monkey, key) { %>
  namespace.config.<%= key %> = {
  <% i = 1 %>
  <% _.each(monkey, function(value, key) { %>
    <% comma = (Object.keys(monkey).length === i) ? '': ',' %>
    <% if(typeof value === 'string') {%>
      <%= key %>: '<%= value %>'<%= comma %>
    <%} else { %>
      <%= key %> : <%= value %><%= comma %>
    <% } %>
    <% i++ %>
  <% }); %>
  };
<% }) %>

然后大口地编译它

var gulp = require('gulp');
var template = require('gulp-template');
var rename = require('gulp-rename');
var removeEmptyLines  = require('gulp-remove-empty-lines');

var sharedVars = require('./dev/config');

gulp.task('compile', function() {
  gulp.src('./dev/templates/sass-config.txt')
    .pipe(template(sharedVars))
    .pipe(rename('_sass-config.scss'))
    .pipe(removeEmptyLines())
    .pipe(gulp.dest('./dev/sass'));

  gulp.src('./dev/templates/js-config.txt')
    .pipe(template(sharedVars))
    .pipe(rename('js-config.js'))
    .pipe(removeEmptyLines())
    .pipe(gulp.dest('./dev/js'));
});

这可以使用gulp-sass-vars-to-js完成。它从.scss文件生成一个.js文件。.js文件包含.scss文件中声明的所有变量。然后，您可以将此生成的js“要求”到.js中

对于维生素JS+React=〉
foo.scss =〉foo.modules.scss

$mobileMax: 720px;

:export {
   mobileMax: #{$mobileMax}
}

Component.jsx

import styles from "./foo.modules.scss";

const { mobileMax } = styles;