的WebPack青菜裝載機不產生CSS

Question

我無法弄清楚如何使CSS與上海社會科學院的WebPack裝載機。

App.js文件：

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
import Test from "./Test"; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
     </div> 
     <p className="App-intro"> 
      To get started, edit <code>src/App.js</code> and save to reload. 
     </p> 
      <Test /> 
     </div> 
    ); 
    } 
} 

export default App; 

Test.jsx文件：

import React, { Component } from 'react'; 
import './Test.scss'; 

class Test extends Component { 
    render() { 
     return (
      <p className="intro"> 
       Test 
      </p> 
     ); 
    } 
} 

export default Test; 

Test.scss文件：

.intro{ 
    background-color: #dddddd; 
    color: red; 
} 

webpack.config.dev.js文件：

{ 
      test: /\.css$/, 
      use: [ 
       require.resolve('style-loader'), 
       { 
        loader: require.resolve('css-loader'), 
        options: { 
         importLoaders: 1, 
        }, 
       }, 
       { 
        loader: require.resolve('postcss-loader'), 
        options: { 
         ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options 
         plugins:() => [ 
          require('postcss-flexbugs-fixes'), 
          autoprefixer({ 
           browsers: [ 
            '>1%', 
            'last 4 versions', 
            'Firefox ESR', 
            'not ie < 9', // React doesn't support IE8 anyway 
           ], 
           flexbox: 'no-2009', 
          }), 
         ], 
        }, 
       }, 
      ], 
     }, 
     { 
      test: /\.scss$/, 
      use: [{ 
       loader: "style-loader" // creates style nodes from JS strings 
      }, { 
       loader: "css-loader" // translates CSS into CommonJS 
      }, { 
       loader: "sass-loader" // compiles Sass to CSS 
      }] 
     } 

圖片：
結果

預計

我做錯了與上海社會科學院裝載機。它是什麼？請幫忙。

 { 
      exclude: [ 
       /\.html$/, 
       /\.(js|jsx)$/, 
       /\.css$/, 
       /\.scss$/, 
       /\.json$/, 
       /\.bmp$/, 
       /\.gif$/, 
       /\.jpe?g$/, 
       /\.png$/, 
      ], 
      loader: require.resolve('file-loader'), 
      options: { 
       name: 'static/media/[name].[hash:8].[ext]', 
      }, 
     } 

我加/.scss$/這裏，代碼運行成功，謝謝大家

Answer 1

我這是怎麼一起使用sass-loader與extract-text-webpack-plugin幫助創建一個單獨的文件，而不是隻包括它到bundle.js文件。

我使用webpack v2.6.1

// webpack-config.js

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

    module: { 
      rules: [ 
       { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader']}) }, 
       { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader']}) }, 
      ], 
      }, 
plugins: [ 
    new ExtractTextPlugin('[name]-[chunkhash].css'), 
] 

並將其導入到我的index.js，像這樣：

import '../public/assets/sass/style.scss';