Javascript 如何在js代码中获取SCSS变量（nodejs服务器）？

从这个blogpost示例中，我尝试在js代码中获取scss变量，但没有成功

index.js文件

import variables from './variables.scss';
console.log(variables);

$myvar: 100;

:export {
  myvar: $myvar;
}

module.exports = {
  mode: 'development',
  module: {
    rules: [{
        test: /\.scss$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: 'css-loader'
        }, {
          loader: 'sass-loader'
        }]
    }]
  }
};

  "dependencies": {
    "css-loader": "^5.0.2",
    "lodash": "^4.17.20",
    "postcss-loader": "^5.0.0",
    "sass": "^1.32.6",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.21.2",
    "webpack-cli": "^4.5.0"
  }

变量.scss文件

import variables from './variables.scss';
console.log(variables);

$myvar: 100;

:export {
  myvar: $myvar;
}

module.exports = {
  mode: 'development',
  module: {
    rules: [{
        test: /\.scss$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: 'css-loader'
        }, {
          loader: 'sass-loader'
        }]
    }]
  }
};

  "dependencies": {
    "css-loader": "^5.0.2",
    "lodash": "^4.17.20",
    "postcss-loader": "^5.0.0",
    "sass": "^1.32.6",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.21.2",
    "webpack-cli": "^4.5.0"
  }

webpack.config.js文件

import variables from './variables.scss';
console.log(variables);

$myvar: 100;

:export {
  myvar: $myvar;
}

module.exports = {
  mode: 'development',
  module: {
    rules: [{
        test: /\.scss$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: 'css-loader'
        }, {
          loader: 'sass-loader'
        }]
    }]
  }
};

  "dependencies": {
    "css-loader": "^5.0.2",
    "lodash": "^4.17.20",
    "postcss-loader": "^5.0.0",
    "sass": "^1.32.6",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.21.2",
    "webpack-cli": "^4.5.0"
  }

package.json文件中的依赖项

import variables from './variables.scss';
console.log(variables);

$myvar: 100;

:export {
  myvar: $myvar;
}

module.exports = {
  mode: 'development',
  module: {
    rules: [{
        test: /\.scss$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: 'css-loader'
        }, {
          loader: 'sass-loader'
        }]
    }]
  }
};

  "dependencies": {
    "css-loader": "^5.0.2",
    "lodash": "^4.17.20",
    "postcss-loader": "^5.0.0",
    "sass": "^1.32.6",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.21.2",
    "webpack-cli": "^4.5.0"
  }

编译：

npx网页包

输出：

asset main.js 17.2 KiB [compared for emit] (name: main) runtime modules 937 bytes 4 modules cacheable modules 9.23 KiB modules by path ./src/ 1020 bytes ./src/index.js 324 bytes [built] [code generated] ./src/variables.scss 371 bytes [built] [code generated] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/variables.scss 325 bytes [built] [code generated] modules by path ./node_modules/ 8.23 KiB ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated] ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated] webpack 5.21.2 compiled successfully in 503 ms asset main.js 17.2 KiB[与排放进行比较]（名称：main） 运行时模块937字节4个模块 可缓存模块9.23 KiB 按路径划分的模块。/src/1020字节 ./src/index.js 324字节[构建][代码生成] ./src/variables.scss 371字节[编译][生成代码] ./node_modules/css loader/dist/cjs.js/node_modules/sass loader/dist/cjs.js/src/variables.scss 325字节[编译][生成代码] 按路径划分的模块。/node_模块/8.23 KiB ./node_modules/style loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB[构建][代码生成] ./node_modules/css loader/dist/runtime/api.js 1.57 KiB[构建][生成代码] 网页5.21.2在503毫秒内成功编译 在web控制台中，对象

variables

是空的，当然，我不能使用

variables.myvar

webpack.config.js中是否存在配置问题？我尽量简化它。所有节点_模块均为最新版本，npm版本为6.14.9

---

谢谢你的帮助。

我不知道，但这可能只适用于“css模块”。如果没有将css加载器配置为基于模块，我从未尝试过它。（您可以在我的配置中看到模块已激活） 请尝试以下操作：将

变量.scss

重命名为

变量.module.scss

---

因为默认情况下，css加载程序会根据文件名（）将您的文件视为模块或不视为模块。

谢谢您的回答。我正在学习网页包及其配置。之前，我让nodejs/react为我做这件事。但它不起作用。在配置文件中的post css加载程序中，选择{config已不存在，您必须使用PostssOptions。但它仍然不起作用。另一个配置pb。您不需要postcss加载器。我只使用它为css自定义属性添加回退值。当我完成我的webpack教程时，我将尝试不使用它。我知道我需要更好地了解webpack及其模块。谢谢需要很多帮助。我很快就会回来。你是对的。它只适用于css模块。在一些网页教程之后，我理解了你的答案。它有效。我在css加载器选项中添加了

模块：true

，我可以得到myvar:

变量。local.myvar

。非常感谢。