Webpack-在vue專案中引用SCSS

Posted on June 17, 2019 本文总阅读量次

vue-loader 默認只支持 SASS，如果要是想要使用 SCSS，必須安装 node-sass和sass-loader，並修改相關 webpack 配置。

如果尚未安裝style-loader(或 vue-style-loader) 及 css-loader也須一併安裝

1	npm install style-loader ss-loader -D

概念上，是先透過sass-loader將.scss 檔案轉換成 css，再交給css-loader，最後再交給style-loader處理，所以依照使用loader
的順序，將loader寫入rules中。

打開webpack.config.js, 在module里的rules中加上：

module: {
    rules: [
      { test: /\.scss$/, use: ['vue-style-loader', 'css-loader','sass-loader'] },
    ],
  },

在 style處聲明：

1
2
3

<style rel="stylesheet/scss" lang="scss">
 //...內容
</style>

如果僅限於當前組件有效，建議要加上 scoped，避免組件間的樣式互相影響：

<style rel="stylesheet/scss" lang="scss" scoped>
 //...內容
</style>
复制

如果想要將SCSS獨立於另一個檔案中，則可以在<script>開頭用import將檔案引入

<script scoped>
import './style.scss';
//...
</script>

或是使用<style>tag，用src引入SCSS檔案(提示：一個.vue可以有多個<style> tag)

1	<style lang="scss" src="./style.scss"></style>

lang="scss" 告訴 webpack 我們這段 style 開發是使用 SCSS 語言，要使用 sass-loader 編譯。
1
<style lang="scss" src="./assets/css/bootstrap/stylesheets/_bootstrap.scss"></style>

或是直接在main.js 直接引入 scss（如果是.vue組件檔案，則是在組件中的script用import引入）

1	import './assets/css/bootstrap/stylesheets/_bootstrap.scss';

參考資料