Vue. vue-cli에서 SCSS 적용과 Global SCSS 적용
Vue-Cli에서 SCSS 적용
Vue에서는 vue-loader 덕분에 Single File Component 구성의 .vue 파일 내에서 style 태그에 lang="scss" 요소를 추가하여 사용할 수 있다.
npm install --save-dev node-sass sass-loader<style lang="scss">
$bgColor: #232323;
.className: {
background: $bgColor;
}
</style>SCSS는 사용함에 있어 variables 또는 mixin, 함수를 사전에 별도의 파일로 분리하여 사용하기에 모든 파일에서 @import 해야하는 반복적인 작업해야하는 불편함이 있을 수 있다.
// *.vue
<style lang="scss">
@import "@/style/_variables.scss";
@import "@/styles/_mixins.scss";
@import "@/styles/_functions.scss";
/* ... */
</styla>이런 반복적인 작업을 피하기 위해서는 위의 파일들을 전역 범위에서 사용할 수 있도록 바꿔줘야 한다.
작업에 앞서 vue-cli의 2.x에서는 webpack.config.js 파일이 루트 디렉토리에 있었으나, 3.x에서는 vue.config.js 파일을 생성하여 설정해야 한다.
// vue.config.js
module.exports = {
// options
}loaderOptions 라는 vue-loader 의 내부 구성을 변경하는데 사용할 수 있는 css 옵션이 있다.
// vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
`
}
}
}
}위 설정을 통해서 sass-loader에 추가된 모든 코드는 전역 범위에서 사용할 수 있다.
// styles/_variables.scss
$bgColor: red;// *.vue
<script lang="scss">
.className {
background: $bgColor;
}
<script>vue-cli 2.x 라면
vue-cli 2.x 버전이라면 Webpack 구성 파일의 vue-loader 옵션을 수정해야한다.
// webpack.config.js
{
test: \/.scss&/,
use: [
"vue-styles-loader",
"css-loader",
{
loader: "scss-loader",
options: {
data: `
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
`
}
}
]
}