我正在尝试将 SASS 变量导入到我的 javascript 文件中

Question

我试图让我的.js文件查看 SASS 变量，我已经关注了这篇文章。 这个问题的特点是我尝试这种方法时遇到的错误。 但是，即使您以另一种方式成功地在 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文件的图片：

我得到的错误是：

Answer 1

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

您有 2 个选择：

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

// 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',
        ],
      },
      // ...
    ],
  },
};

我正在尝试将 SASS 变量导入到我的 javascript 文件中

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-11-02 08:17:06

我正在尝试将 SASS 变量导入到我的 javascript 文件中

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-11-02 08:17:06

解决方案1
0 已采纳 2020-11-02 08:17:06