在vue.config.js中引入sass全局配置后報錯
vue.config.js代碼如下:
module.exports = { devServer: { port: 3333, open: true }, css: { loaderOptions: { sass: { data: `@import "@/assets/scss/_variable.scss";` } } } }
_variable.scss的代碼如下:
$theme-color: #33aef0;
組件中的scss代碼如下:
<style lang="scss"> #app { color: $theme-color; height: 100vh; } </style>
頁面報錯如下:
./src/assets/scss/reset.scss (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./src/assets/scss/reset.scss) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema. - options has an unknown property 'data'. These properties are valid: object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? } at validate (E:\element-ui\vue-manage-system\node_modules\schema-utils\dist\validate.js:85:11) at Object.loader (E:\element-ui\vue-manage-system\node_modules\sass-loader\dist\index.js:36:28)
解決辦法:
將data改成
prependData
// 舊
data: `@import "@/assets/scss/_variable.scss";`
// 新
prependData: `@import "@/assets/scss/_variable.scss";`