可以在 main.js 全局引入，下面是使用方法。
1： 安装 node-sass 、 sass-loader 、 style-loader
npm install node-sass --save-dev | |
npm install sass-loader --save-dev | |
npm install style-loader --save-dev |
2： 安装 sass-resources-loader （如果不安装的话变量会报错）
npm install sass-resources-loader --save-dev |
3：vue-cli4.0 配置方法
// vue.config.js | |
module.exports = { | |
publicPath: './', | |
outputDir: 'dist', | |
assetsDir: 'static', | |
indexPath: 'index.html', | |
filenameHashing: true, | |
lintOnSave: true, | |
productionSourceMap: false, | |
css: { | |
loaderOptions: {} | |
}, | |
chainWebpack: config => { | |
const oneOfsMap = config.module.rule('scss').oneOfs.store | |
oneOfsMap.forEach(item => { | |
item | |
.use('sass-resources-loader') | |
.loader('sass-resources-loader') | |
.options({ | |
// 要公用的 scss 的路径 | |
resources: './src/assets/scss/public.scss' | |
}) | |
.end() | |
}) | |
} | |
} |
在 main.js 里面引入即可，
或者是不在 main.js 引入，单独在组件引入也可以，在组件中的 style 标签添加 lang="scss"。
4： vue-cli2.0 配置方法，修改 build 中的 utils.js
scss: generateLoaders('sass'), | |
修改成: | |
scss: generateLoaders('sass').concat( | |
{ | |
loader: 'sass-resources-loader', | |
options: { | |
resources: path.resolve(__dirname, '../src/assets/main.scss') //这里写自己的文件路径 | |
} | |
} | |
) |
