vue-cli2
- 安裝node-sass钝尸、sass-loader括享、style-loader:
npm install node-sass sass-loader --save-dev
npm install style-loader --save-dev
2、安裝sass-resources-loader:
cnpm install sass-resources-loader --save-dev
3珍促、修改build中utils.js文件下的一段代碼:
修改前:
將
scss: generateLoaders('sass')
修改成如下代碼:
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/css/_handle.scss'),
}
}
),
4.記得要重啟一下項目铃辖,項目重啟之后就可以在任意地方使用_handle.scss中定義好的樣式變量了。
vue-cli3
編輯vue.config.js
文件猪叙。如下:
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "@/assets/css/_handle.scss";`
}
}
}
}
記得要重啟一下項目娇斩,項目重啟之后就可以在任意地方使用_handle.scss中定義好的樣式變量了。