我正在尝试将 SASS 变量导入我的 javascript 文件答案

【问题标题】：I am trying to import SASS variables into my javascript file我正在尝试将 SASS 变量导入我的 javascript 文件
【发布时间】：2021-02-14 16:17:17
【问题描述】：

我试图让我的.js 文件查看 SASS 变量，我已经关注了这个article。这个问题的特点是我尝试这种方法时遇到的错误。但是，即使您已经成功通过其他方式在 javascript 中导入 SASS 变量，也请与我分享您的成功！

我会告诉你我写的代码和我得到的错误。先上代码：

我的webpack.config.js 文件：

module.exports = {

    entry: `./sass.js`, 
    output: {
      path: `${__dirname}`, 
      filename: 'bundle.js'
    },
    mode: 'development',

    // ...
    module: {
        rules: [
        {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"]
        },
        // ...
        ]
    }  
}

我的.scss 文件：


$kiwi: red;

:export {
    kiwi: $kiwi,
}

我的.js 文件：

import variables from './webpack_sass.scss';

我的.html 文件（我检查过的确实正确地看到了bundle.js）：

<head>
  <script type="module" src="./bundle.js"></script>
</head>

我已经安装了webpack & webpack-cli。这是我的package.json 文件的图片：

我得到的错误是：

【问题讨论】：

变量是一个标识符而不是一个字符串——它不应该有引号。
感谢@RandyCasburn。我已进行此更改并更新了错误消息
根据您需要处理的值，您可以将 SASS 变量设置为 CSS 变量并使用 JS 获取/设置它们。
@DavidAlsbright 我真的很想使用 SASS 变量，因为有很多文章声称如果您在 google 中输入“将 sass 变量导入 javascript”就可以轻松完成。我不知道我错过了什么。
@DavidAlsbright 我最终尝试了您的方法但没有成功。我可能会发布一个新问题来解决它。或者你有一个可靠的来源可以告诉我如何去做吗？它在 CSS 变量的值是常规 CSS 属性值时有效，但在它是 SASS 变量时无效。记录的是这些 SASS 变量的文字字母，例如$color.

标签： javascript html css webpack sass

【解决方案1】：

:export 语法是css-loader 添加的糖，您需要做的就是启用css-modules 功能。

你有两个选择：

将.module.scss 后缀添加到您的文件中（因为默认情况下启用了css-module）
通过指定为所有 .scss 导入启用 css 模块

// webpack.config.js

module.exports = {
  entry: `./sass.js`,
  output: {
    path: `${__dirname}`,
    filename: 'bundle.js',
  },
  mode: 'development',

  // ...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true, // <- this enables css-modules for all imports
            },
          },
          'sass-loader',
        ],
      },
      // ...
    ],
  },
};

【讨论】：

我在帖子底部放了一张图片来展示配置文件现在的样子。仍然得到同样的错误
可以添加整个 webpack.config 吗？我的建议不是作为复制粘贴解决方案
你的意思是把它整合到我已经拥有的东西中？我试过了。你能在你的答案中试一试吗？
我已经在你的代码中集成了 loader 选项......但是请先尝试使用文件名选项......（将你的 css 文件重命名为 .module.scss 而不是 .scss）跨度>
我能够通过 1. 使用您的 webpack.config.js 文件（文章中的文件不起作用）和 2. 安装文章未提及的 sass css-loader style-loader sass-loader 来使其工作.因为我 i) 感觉我正在复制和粘贴 .config 文件而不了解发生了什么 ii) 我使用 react 并且没有信心修改其中的 webpack.config.js 文件 & iii) 已成功分配值将 SASS 变量转换为 CSS 变量并将这些 CSS 变量导入.js，我将停止追求此解决方案。我可以接受 IE 不支持 CSS 变量。