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

Question

I an attempt to get my .js file to see SASS variables, I've followed this article .我试图让我的.js文件查看 SASS 变量，我已经关注了这篇文章。 This question features an error I get from attempting this method.这个问题的特点是我尝试这种方法时遇到的错误。 But even if you have had success importing SASS variables in javascript in another way, please do share your success with me!但是，即使您以另一种方式成功地在 javascript 中导入 SASS 变量，也请与我分享您的成功！

I will show you the code I've written and the error I get.我会告诉你我写的代码和我得到的错误。 First the code:先上代码：

My webpack.config.js file:我的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"]
        },
        // ...
        ]
    }  
}

My .scss file:我的.scss文件：


$kiwi: red;

:export {
    kiwi: $kiwi,
}

My .js file:我的.js文件：

import variables from './webpack_sass.scss';

My .html file (which I've checked does correctly see bundle.js ):我的.html文件（我检查过的文件正确地看到了bundle.js ）：

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

I have installed webpack & webpack-cli .我已经安装了webpack和webpack-cli 。 Here's a picture of my package.json file:这是我的package.json文件的图片：

The error I get is:我得到的错误是：

Answer 1

:export syntax is a sugar that css-loader adds, all you need to do is to enable the css-modules feature. :export语法是css-loader添加的糖，您需要做的就是启用css-modules功能。

You have 2 choices:您有 2 个选择：

add .module.scss suffix to your file (since css-module is enabled by default for it)将.module.scss后缀添加到您的文件中（因为默认情况下启用了 css-module）
enable css-modules to all .scss imports, by specifying通过指定为所有.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