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

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

1 个答案: