webpack使用import引入scss不打包 改用require则正常

问题根因 #

1. 你当前webpack配置没有声明样式文件属于有副作用的模块，webpack默认会把没有任何导出、看起来没有被使用的ES Module import语句（就是你写的import "./scss/style.scss"）当做无用代码在Tree Shaking阶段移除，而CommonJS的require不会被Tree Shaking处理，所以能正常生效。
2. 你的resolve.extensions配置只包含了.js后缀，显式配置后会覆盖webpack默认的后缀补全规则，也会影响样式文件的引入识别。

修复步骤 #

1. 添加sideEffects配置 #

你可以二选一配置：

• 方式一：在package.json里新增字段，声明样式文件属于有副作用的模块，不需要被Tree Shaking删除：

{
  "sideEffects": [
    "*.css",
    "*.scss",
    "*.sass"
  ]
}

• 方式二：直接在webpack配置的css处理规则里加配置：

{
  test: /\.(sa|sc|c)ss$/,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader',
  ],
  sideEffects: true // 新增这行即可
}

2. 补全resolve.extensions配置 #

把样式相关后缀和vue后缀加到配置里，避免引入文件时识别异常：

resolve: {
  extensions: ['.js', '.vue', '.css', '.scss', '.sass'],
  alias: {
    "@": path.resolve(__dirname, 'web')
  }
}

修改完成后重新运行webpack，import "./scss/style.scss"即可正常打包样式。

内容的提问来源于stack exchange，提问作者CodingKiwi