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

我正在使用Vue CLI，它将运行和构建应用程序所需的大部分网页包配置抽象出来。这带来了一些好处，但我不知道如何为

.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')) {
              
            }

          },
        },
      },
    ],
  },
}

---

谢谢

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

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

---

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

vue inspect

谢谢，我想我会重新表述这个问题，因为我不知道如何使用标准的网页包配置来实现这一点。