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

问题描述

我正在使用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')) {
              
            }

          },},],}

谢谢

解决方法

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

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

我不确定如何将输出配置为所需的方式，但这应该会对您有所帮助。要查看将vue.config.js转换为webpack的内容，可以运行vue inspect