Vue CLI - 从 .scss 文件目录单独编译 CSS 文件

Question

我正在使用 Vue CLI，它抽象了大部分用于运行和构建应用程序的 Webpack 配置。这有一些好处，但我不知道如何为.scss 文件的目录创建特定规则。

我希望这些文件不在构建时被提取到单个 .css 文件中，而是单独编译到主题目录 (./dist/themes) 中。

我尝试在vue.config.js 中创建一个规则来识别目录，但它不起作用：

module.exports = {
  runtimeCompiler: true,
  configureWebpack: config => {
    config.module.rules.push(
      {
        test: /\.md$/,
        use: 'raw-loader'
      },
      {
        test: /\.ya?ml$/,
        type: 'json', // Required by Webpack v4
        use: 'yaml-loader'
      }
    )
  },
  module: {
    rules: [
      {
        test: /\.scss$/i,
        loader: 'css-loader',
        options: {
          import: (url, media, resourcePath) => {

            // Find .scss files in src/assets/themes 
            if (url.includes('./src/assets/themes')) {
              
            }

          },
        },
      },
    ],
  },
}

谢谢

Answer 1

我认为您在 vue.config.js 中的格式不正确。这是您将 scss 选项传递给加载程序的方式：

    css: {
        loaderOptions: {
            scss: {
                   // options
            }
        }
    }

我不确定您如何将输出配置为您想要的，但这应该对您有所帮助。要查看 vue.config.js 在 webpack 中的翻译，您可以运行 vue inspect