Css未裝入webpack

我無法使用webpack加載我的樣式 - 我有幾個.scss文件，webpack應該將它們編譯爲.css文件並生成JS輸出文件。該文件生成正確，但.css文件只是不存在。有什麼可以不對我的配置？：Css未裝入webpack

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

const DIST_DIR = path.resolve(__dirname, 'dist'); 
const APP_DIR = path.resolve(__dirname, 'src'); 

const sassLoaders = [ 
    'css-loader', 
    'sass-loader?indentedSyntax=sass&includePaths[]=' + DIST_DIR 
] 

const config = { 
    entry: { 
     app: [APP_DIR + '/index.js'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx$/, 
       include: APP_DIR, 
       loaders: ['babel'] 
      }, 
      { 
       test: /\.scss$/, 
       include: DIST_DIR, 
       loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!')) 
      } 
     ] 
    }, 
    output: { 
     filename: 'js/bundle.js', 
     path: DIST_DIR 
    }, 
    plugins: [ 
     new ExtractTextPlugin('[name].css') 
    ], 
    resolve: { 
     extensions: ['', '.js', '.scss'], 
     root: [APP_DIR] 
    } 
} 

module.exports = config

文件結構：

dist 
- css 
    - style.scss 
- js 
src 
- index.js

來源

2017-02-17 user99999

你應該匹配針對' .scss'擴展名不是'.sass'。嘗試將'test'鍵更改爲'/ \。scss $ /' –

當然，只是一個錯字，它不會改變我的情況。 – user99999

試着改變你的模塊裝載機爲您SCSS文件：

{ test: /\.s[ac]ss(\?|$)/, loaders: ['style', 'css', 'sass'] }

來源

2017-02-17 14:51:41

Css未裝入webpack

回答

相關問題