Webpack에서 내 CSS 파일을 무시하는 이유는 무엇입니까?

나는 (PostCSS를 사용하는) CSS 파일을 별도의 파일로 컴파일하기 위해 webpack을 얻으려고한다. 설명서에서 ExtractTextPlugin이 정확히 수행해야하는 것처럼 보입니다. 그러나, 나는 CSS 패키지로 아무것도 할 수있는 webpack을 얻을 수 없다.Webpack에서 내 CSS 파일을 무시하는 이유는 무엇입니까?

관련 프로젝트 구조 :

dist 
⎣js 
    ⎣bundle.js 
public 
⎣css 
    ⎣style.css* 
src 
⎣css 
    ⎣index.css 

* file doesn’t exist (hasn’t been created)

webpack.config.babel.js

import webpack from 'webpack'; 
import path from 'path'; 

import ExtractTextPlugin from 'extract-text-webpack-plugin'; 

import { WDS_PORT } from './src/shared/config'; 
import { isProd } from './src/shared/util'; 

export default { 
    entry: [ 
    'react-hot-loader/patch', 
    './src/client', 
    ], 
    output: { 
    filename: 'js/bundle.js', 
    path: path.resolve(__dirname, 'dist'), 
    publicPath: isProd ? '/static/' : `http://localhost:${ WDS_PORT }/dist/`, 
    }, 
    module: { 
    rules: [ 
     { test: /\.(js|jsx)$/, use: 'babel-loader', exclude: /node_modules/ }, 
     { 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: [ 
      { 
       loader: 'style-loader', 
      }, 
      { 
       loader: 'css-loader', 
       options: { 
       sourceMap: true, 
       importLoaders: 1, 
       }, 
      }, 
      { 
       loader: 'postcss-loader', 
       options: { 
       sourceMap: 'inline', 
       }, 
      }, 
      ], 
     }), 
     }, 
    ], 
    }, 
    devtool: isProd ? false : 'source-map', 
    resolve: { 
    extensions: ['.js', '.jsx', '.css'], 
    }, 
    devServer: { 
    port: WDS_PORT, 
    hot: true, 
    }, 
    plugins: [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NamedModulesPlugin(), 
    new webpack.NoEmitOnErrorsPlugin(), 
    new ExtractTextPlugin('./public/css/style.css'), 
    ], 
};

이 행복 하 게 제대로 내 자바 스크립트를 컴파일하지만, 내 CSS에 전혀 아무것도하지 않는다. 무엇이 잘못 되었습니까? 어떻게 수정합니까?

출처

2017-04-11 futuraprime

또한 주목할 가치가 있습니다 : postCSS를 방정식에서 제외하고'use : 'css-loader '' 만 있으면 여전히 아무것도하지 않습니다. – futuraprime

쉘에서 webpack을 실행할 때 출력을 확인 했습니까? – Sebastianb

Webpack은 특정 시점에서 가져 오는 파일 만 처리합니다. 이는 엔트리 포인트로 지정되거나 엔트리 포인트에서 참조 된 파일로 가져 오기됩니다. 규칙은 파일을 가져 오지 않으며 가져 오기가 테스트를 통과 할 때마다 적용됩니다 (정규 표현식과 일치).

다른 모듈과 마찬가지로 CSS를 가져와야합니다.

import './css/index.css';

Code Splitting - CSS도 참조하십시오.

출처

2017-04-11 14:03:09

Webpack에서 내 CSS 파일을 무시하는 이유는 무엇입니까?

답변

관련 문제