webpack의 sass-loader 설정 방법에 대해. sass로 원래 변수를 만듭니다 (덮어 쓰기).

webpack에서 sass-loader를 사용할 때, 설정 파일(webpack.config.js)의 기술이 WEB상에 복수 존재하고 있기 때문에 헤매는다.

vuetify SASS variables 페이지 하지만 에러도 발생하지 않고 사용할 수 있다.

마찬가지로 vuetify getting started에도 설명이 있지만, 여기는 오류가 발생하여 사용할 수 없었다. 오류 발생 이유에 대한 요약.

오류가 발생한 설명

아래 페이지를 참조하여 설명을 진행하면 오류가 발생했습니다.


webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              implementation: require('sass'),
              indentedSyntax: true // optional
            },
            // Requires sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                indentedSyntax: true // optional
              },
            },
          },
        ],
      },
    ],
  }
}

옵션에 indentedSyntax가 기술되어 있지만, 이것이 설정되어 있으면 scss는 에러가 발생한다.

sass와 scss의 기술 방법이 다르고, sass는 들여쓰기로 행의 단락을 나타내는 한편, scss는 css와 같이 괄호{}나 세미콜론;를 사용하기 때문.

이 설명에서는 /\.s(c|a)ss$/ 가 되어 있어, sass와 scss의 파일을 검출했을 경우에 sass-loader를 사용하는 지시가 되고 있습니다만, sass인가 scss인가로 indentedSyntax의 필요가 바뀌기 때문에

또한 위와 같은 설명은 그대로 copipe에서는 안 되고 버전에 맞게 스스로 선택할 필요가 있다.

기본적으로 v8을 사용하기 때문에 v7의 설명은 삭제한다.

사용할 경우 버전을 짜내고 scss는 indentedSyntax를 비활성화 (삭제)합니다.

webpack.config.js()

module.exports = {
  module: {
    rules: [
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                //indentedSyntax: true // optional
              },
            },
          },
        ],
      },
    ],
  }
}

SASS variables

vuetify의 SASS variables에 설명 된 설정을하는 것이 좋습니다.
여기의 기술 방법을 사용하면, vuetify로 디폴트로 설정되어 있는 변수의 스타일을 변경할 수가 있다.

페이지내의 기술은 확실히 꽤 길게 보이지만, 방금전과 같이 버젼을 짜면 간단하게 된다.

여기에서는 scss와 sass를 따로 기술하고 있다.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            // Requires sass-loader@^9.0.0
            options: {
              // This is the path to your variables
              additionalData: "@import '@/styles/variables.scss'"
            },
          },
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            // Requires sass-loader@^9.0.0
            options: {
              // This is the path to your variables
              additionalData: "@import '@/styles/variables.scss';"
            },
          },
        ],
      },
    ],
  },
}

파일 경로 설정

SASS variables(변수)를 사용하는 경우, 개인으로 작성한 파일을 읽어들일 필요가 있다.

다음은 그 설명.

@import '@/styles/variables.scss'

· @import ファイルパス파일 경로의 파일을 읽습니다.

· @/styles/variables.scss이 @는 파일 경로의 별칭. 별도로 설정할 필요가 있다.
여기에 @ 부하 styles 부하의 variables.scss를 읽습니다.

@를 사용하지 않고, 「./」등의 상대 패스로 쓰는 것도 가능.

파일 경로 별칭을 만드는 방법

파일 경로 별칭을 만들려면 webpack.config.js의 resolve에 alias 설정을 작성하십시오.

webpack.config.js

  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src/styles'),
    }, 

'エイリアス':path.resolve(__dirname, 'パス')의 형태로 기술한다.

위의 예에서 @ = src/styles입니다. 그리고는, 실제로 폴더를 작성해,variables.scss를 작성하면 OK.

@를 ~로 바꾸거나 파일 경로를 다른 것으로 하면 다른 별칭을 설정할 수 있다.

> webpack resolve alias

SASS 변수

vuetify에서는 sass를 사용한 변수가 디폴트로 설정되어 있다. vuetify는이 변수를 사용하여 멋진 버튼과 텍스트 상자를 깔끔하게 제공합니다.

기본적으로 설정된 변수를 확인하는 방법

vuetify SASS variables의 페이지 중간에 설명되어 있습니다.



탭에서 sass 변수를 확인할 요소를 선택합니다. $vuetify 는 전체에 적용되는 것.
v-btn 이나 v-alert 등은 각 요소에 개별적으로 준비되어 있는 설정.



각 변수와 기본 설정 값이 표시됩니다. 방금 읽어들인 설정을 한, variables.scss로 변수를 지정해 스타일을 기술하면 디폴트의 설정을 변경할 수 있다.

> sass의 변수 정보

(보충) loader 로딩 순서

sass-loader를 webpack.config.js 파일에 작성할 때 항상

①(vue-)style-loader > ②css-loader > ③sass-loader의 순서로 기술한다.

각 loader는 chain으로 연결되기 때문에, 실행하는 순서대로 기술하지 않으면 에러가 발생한다.