如何通过webpack将SCSS导入index.html 适配vue/cli@next的noscript场景

1. 编写独立SCSS样式文件 #

在项目src目录下新建专门存放noscript样式的SCSS文件，例如src/styles/noscript.scss，直接编写对应样式即可：

.error-background {
  width: 100vw;
  height: 100vh;
  background-color: #f0f2f5;
  // 其他自定义样式
}

提示：如果项目未初始化SCSS支持，先执行npm install sass sass-loader -D安装依赖即可，vue/cli会自动识别并启用sass-loader。

2. 配置webpack单独打包独立CSS文件 #

因为noscript样式需要在JS禁用场景下生效，不能依赖JS注入样式，所以需要将该样式单独打包为独立CSS文件。在项目根目录新建vue.config.js（如果已有则直接修改），添加如下配置：

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

module.exports = {
  // 配置CSS压缩规则
  configureWebpack: {
    optimization: {
      minimizer: [
        new CssMinimizerPlugin({
          minimizerOptions: {
            preset: [
              'default',
              {
                discardComments: { removeAll: true }
                // 可自行添加其他自定义压缩配置
              }
            ]
          }
        })
      ]
    }
  },
  // 配置单独打包noscript样式
  chainWebpack: config => {
    config.entry('noscript')
      .add('./src/styles/noscript.scss')
      .end()
    
    config.plugin('extract-css')
      .tap(args => {
        args[0].filename = 'css/[name].css'
        return args
      })
  }
}

3. 在HTML模板中引入独立CSS #

打开public/index.html，在<head>标签内引入打包后的CSS文件，确保JS禁用时样式也能正常加载：

<head>
  <!-- 原有meta、title等配置 -->
  <link rel="stylesheet" href="<%= BASE_URL %>css/noscript.css">
</head>
<body>
  <noscript>
    <div class="error-background"></div>
  </noscript>
  <div id="app"></div>
</body>

不需要使用特殊的require引入方式，上述配置即可实现SCSS编译、CSS压缩的全流程处理，同时保证JS禁用时noscript样式正常生效。

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