在vue中引用.SCSS的公用文件

最新推荐文章于 2024-08-12 22:07:17 发布

weixin_30361641

最新推荐文章于 2024-08-12 22:07:17 发布

阅读量799

点赞数

文章标签： javascript webpack ViewUI

原文链接：http://www.cnblogs.com/mengdiezhuangzhou/p/10195767.html

版权

1 cnpm i --save-dev sass-resouces-loader

删除webpack base.conf.js

// {
//   test: /\.scss$/,
//   loaders: ["style", "css", "sass"]
// },

2在build/utils文件中添加以下代码

 1 return {
 2    css: generateLoaders(),
 3    postcss: generateLoaders(),
 4    less: generateLoaders('less'),
 5    sass: generateLoaders('sass', { indentedSyntax: true }),
 6    scss: generateLoaders('sass').concat(
 7      {
 8        loader: 'sass-resources-loader',
 9        options: {
10          // 需要全局引入的sass文件，这里引入了的scss文件，在所有的.vue文件都可以用到这份css样式，
11          // 下面的resources接受一个数组，可以添加多个scss文件
12          resources: [path.resolve(__dirname, '../src/assets/css/commone.scss')]
13        }
14      }
15    ),
16    stylus: generateLoaders('stylus'),
17    styl: generateLoaders('stylus')
18  }