带有 vue-loader 和 sass-loader 的 webpack 无法导入 .scss 文件
webpack with vue-loader and sass-loader can't import .scss files
我正在尝试将一些变量导入 .vue 组件,但它不起作用,我怀疑 webpack 配置不正确...
.vue
<style scoped lang="scss">
@import "variables";
...
config.js
...
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'sass-loader': {
data: '@import "variables";',
includePaths: [
// yes, I've tested different paths with no luck...
'/src/scss',
'./src/scss',
path.resolve(__dirname, '/src/scss'),
path.resolve(__dirname, './src/scss')
]
},
},
}
},
...
我看到很多其他人有这种需求,想知道您是否找到了解决方案。将 sass 放入模板中很好,但是没有变量是非常无用的...(当然,我可以只输入绝对路径,它可以工作,但这是一个不好的做法...)
我刚刚在我当前的项目中解决了这个问题,所以这是我工作的 webpack 配置的相关部分:
test: /\.vue$/,
loader: 'vue-loader',
options: {
esModule: true,
loaders: {
sass: [ 'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
indentedSyntax: true;
data: '@import "variables";',
includePaths: [
'src/styles',
],
},
},
],
scss: [ 'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
data: '@import "variables";',
includePaths: [
'src/styles',
],
},
},
],
加载器以 vue 文件中的文件类型或语言标记为键,然后分配特定于语言的加载器列表。如果您只使用 sass 或 scss,您可以使用默认值(或放弃)另一个。
我正在尝试将一些变量导入 .vue 组件,但它不起作用,我怀疑 webpack 配置不正确...
.vue
<style scoped lang="scss">
@import "variables";
...
config.js
...
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'sass-loader': {
data: '@import "variables";',
includePaths: [
// yes, I've tested different paths with no luck...
'/src/scss',
'./src/scss',
path.resolve(__dirname, '/src/scss'),
path.resolve(__dirname, './src/scss')
]
},
},
}
},
...
我看到很多其他人有这种需求,想知道您是否找到了解决方案。将 sass 放入模板中很好,但是没有变量是非常无用的...(当然,我可以只输入绝对路径,它可以工作,但这是一个不好的做法...)
我刚刚在我当前的项目中解决了这个问题,所以这是我工作的 webpack 配置的相关部分:
test: /\.vue$/,
loader: 'vue-loader',
options: {
esModule: true,
loaders: {
sass: [ 'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
indentedSyntax: true;
data: '@import "variables";',
includePaths: [
'src/styles',
],
},
},
],
scss: [ 'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
data: '@import "variables";',
includePaths: [
'src/styles',
],
},
},
],
加载器以 vue 文件中的文件类型或语言标记为键,然后分配特定于语言的加载器列表。如果您只使用 sass 或 scss,您可以使用默认值(或放弃)另一个。