0

从这个博客文章示例https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript，我试图在我的 js 代码中获取 scss 变量，但我没有设法做到这一点。

index.js文件

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

变量.scss文件

$myvar: 100;

:export {
  myvar: $myvar;
}

webpack.config.js文件

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

package.json文件中的依赖项

  "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 webpack
输出：

资产 main.js 17.2 KiB [与 emit 相比]（名称：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_modules/ 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 [内置] [代码生成]  
webpack 5.21.2 503 ms 编译成功

在 Web 控制台中，该对象variables是空的，当然，我不能使用variables.myvar.
webpack.config.js 中是否存在配置问题？我试图尽可能地简化它。所有 node_modules 都是最新的，npm 版本是 6.14.9。

感谢帮助。

4

1 回答 1

1

我不知道，但也许这只适用于“css模块”。如果没有将 css-loader 配置为基于模块，我从未尝试过。（您可以在此答案中的配置中看到模块已激活）请尝试以下操作：将您的重命名variables.scss为variables.module.scss 因为默认情况下，css-loader 会将您的文件视为模块或不视为基于文件名的模块（https://webpack .js.org/loaders/css-loader/#modules）。

于 2021-02-10T08:58:39.427 回答