我正在使用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')) {
}
},
},
},
],
},
}
谢谢
答案 0 :(得分:1)
我认为您在vue.config.js中的格式不正确。这是将scss选项传递给加载程序的方式:
css: {
loaderOptions: {
scss: {
// options
}
}
}
我不确定如何将输出配置为所需的方式,但这应该会对您有所帮助。要查看将vue.config.js转换为webpack的内容,可以运行vue inspect