웹팩 3 - CSS 파일에 스타일을 쓰기는

Question

나는 자습서의 톤을 읽고 내가 기억하는 걱정보다 더 많은 Github에서의 REPOS 보았다하지만 난 정말 다음을 수행하기 위해 설치 웹팩 3 사투를 벌인거야있다 :

• :
• 실행 Autoprefixer 아래는

CSS에의 dist 디렉토리 내에서 CSS 파일을 만듭니다 CSS

에 SASS를 컴파일하는 것은 내 webpack.config.js입니다 순간

const path = require('path') 
const webpack = require('webpack') 
const ExtractTextPlugin = require('extract-text-webpack-plugin') 

module.exports = { 
    context: path.resolve(__dirname, 'src'), 
     entry: { 
     app: './js/index.js', 
    }, 
    output: { 
     filename: 'bundle.js', 
     path: path.resolve(__dirname, 'dist'), 
     publicPath: '/dist',       // New 
    }, 
    devServer: { 
     contentBase: path.resolve(__dirname, 'src'), // New 
    }, 

    module: { 
     rules: [ 
      { 
       test: /\.js$/i, 
       exclude: [/node_modules/], 
       use: [{ 
        loader: 'babel-loader', 
        options: { presets: ['env'] }, 
       }], 
      }, 
      { 
       test: /\.css$/, 
       use: ExtractTextPlugin.extract({ 
       fallback: "style-loader", 
       use: "css-loader" 
       }) 
      }, 
      { 
       test: /\.(sass|scss)$/i, 
       use: [ 
       'style-loader', 
       'css-loader', 
       'sass-loader', 
       ] 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin({ 
     filename: 'css/styles.css', 
     allChunks: true, 
     }), 
    ] 
}; 

:

• 웹팩 dev에 서버가 실행 중입니다.
• 스타일은 src/scss/styles.scss에서 src/index.html에서 제공되는 HTML 파일 내의 인라인 스타일 블록으로 복사됩니다.

내 HTML 내에서 연결할 수있는 styles.css 파일로 dist 디렉토리를 생성하고 싶습니다.

감사 CSS에

Answer 1

컴파일 SASS를

현재 제대로 DIST 디렉토리 내에서 CSS 파일을 만듭니다

{ 
    test: /\.(sass|scss)$/i, 
    use: [ 
    'style-loader', 
    'css-loader', 
    'sass-loader' 
    ] 
} 

와 CSS로 SASS를 컴파일하는

위에서 설명한 로더 체인의 style-loader 때문에 CSS가 외부 파일로 추출되지 않습니다. style-loader은 <style> 내에 전달 된 모든 CSS를 내부화합니다.

사용할 수있는 외부 파일을 만들려면 extract-text-webpack-plugin입니다. 유일한 문제는 /\.(sass|scss)$/ 테스트에 첨부되지 않는다는 것입니다.

원본 파일에 대한 규칙 만 만들어야합니다. SASS/SCSS를 작성하고 있으므로 /\.css$/ 테스트가 필요하지 않습니다. 귀하의 CSS는 당신이 당신의 CSS를 autoprefix하기 위해, 이제 CSS

에

{ 
    test: /\.(sass|scss)$/i, 
    use: ExtractTextPlugin.extract({ 
    fallback: 'style-loader', 
    use: [ 
     'css-loader', 
     'sass-loader' 
    ] 
    }) 
} 

실행 Autoprefixer에 로더 체인을 변경하는 경우 추출해야합니다, 당신은 체인에 다른 로더를 추가해야합니다, . autoprefixer과 함께 설치하십시오.

npm i -D postcss-loader autoprefixer 

은 webpack.config.js의 상단에 autoprefixer의를 필요로 추가.

const autoprefixer = require('autoprefixer'); 

마지막 로더 체인 in between css-loader and sass-loaderpostcss-loader에 추가.

use: [ 
    'css-loader', 
    { 
    loader: 'postcss-loader', 
    options: { 
     plugins: [autoprefixer()] 
    } 
    }, 
    'sass-loader' 
]