lesscss 적용 처리

프로젝트를 진행하다 npm 외부소스가 기능이 제공되지 않아 직접 수정해서 하용할일이 생겼다
해당 소스는 css가 less로 적용되있다

요세는 css도 컴파일되는 less , sass 를 적용해서 많이들 사용한다.
해당 less와 sass의 장점은 해당사이트를 참조하자

지금 프로젝트에 less를 수용 할수있게 수정처리하며 정리를 하였다
작업 과정은 아래와 같다.

1 less-loader 설치
 - npm install less-loader --save-dev

2 less 설치(less-loader dependency 되어있음)
- npm install less --save-dev

3 vue.config.js 스크립트 추가

const lessOptions = {
    javascriptEnabled: true
}
  
module.exports = {       
    chainWebpack: config => {
        
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
        types.forEach(type => {
        config.module
            .rule('less')
            .test( /\.less?$/)
            .oneOf(type)
            .use('less-loader')
            .tap(options => Object.assign({}, options, lessOptions))
        })        
    }
}

참고로 Vue cli3 버전부터는 webpack 관련 구성을 vue.config.js에서 관리한다.
chainWebpack은 내부적으로  webpack-chain 을 통해서 웹팩 설정의 추상화를 제공한다.

위코드의 "tap" 을통해서 옵션을 수정 적용 가능하다.

less-loader만 install 하고 프로젝트 빌드시 아래의 오류가 발생 한다.
cannot find module 'less'

less-loader npm dependency 탭에보면 less가 있다
추가설치후 커파일시 오류가 사라졌으며 lesscss도 컴파일되서 잘 화면에 적용이 되었다.

vue.config.js 관련 추가 설명은 아래를 참조한다.
https://cli.vuejs.org/guide/webpack.html#simple-configuration