.vue檔案裡怎麼寫scss？-Vue.js-PHP中文網

方法：先安裝【node-sass和sass-loader】依賴；然後開啟【webpack.base.conf.js】文件，在rule中加入scss規則；最後在【 】標籤內寫scss樣式。

本教學操作環境：windows7系統、Vue2.9.6版，此方法適用於所有品牌電腦。

在vue專案中使用scss

#1.首先安裝依賴 ##

npm install node-sass sass-loader --save-dev 登入後複製 2.找到 build 中 webpack.base.conf.js ,在 rules 中加入 scss 規則

{ test: /\.scss$/, loaders: ['style', 'css', 'sass'] } 登入後複製 3.在vue檔案中使用 登入後複製 在vue專案全域中引入scss

##1.全域引用時需要安裝 sass-resources-loader npm install sass-resources-loader --save-dev 登入後複製

2.修改 build 中的 utils.js #將

scss: generateLoaders('sass') 登入後複製 修改為

scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { //你自己的scss全局文件的路径 resources: path.resolve(__dirname, '../src/style/common.scss') } } ) 登入後複製