如何使用npm install with webpack使用normalize.css？

我正在使用webpack與ReactJS，並試圖找出npm安裝後如何使用normalize.css（https://necolas.github.io/normalize.css/）。如何使用npm install with webpack使用normalize.css？

npm安裝後馬上應用normalize.css嗎？如果我想如何編輯它？

謝謝你提前一定會投票並接受答案

來源

2017-02-08 Dan Me

-4

首先，安裝或下載GitHub.I將normalize.css推薦下載it.Then，然後2種利用方式主要有的。

方法1：使用normalize.css作爲您自己項目的基礎CSS的起點，自定義值以匹配設計的要求。方法2：包括normalize.css，不改動，並在此基礎上構建，如有必要，在CSS中稍後重寫默認值。

即只要把這些下載的文件到項目文件夾，並通過鏈接標記添加鏈接到它

的link rel = 「樣式」類型= 「文/ CSS的」 href = 「normalize.css」

注意href內容應指向標準化存儲的文件夾。

來源

2017-02-08 19:33:08 er1shivam

相信我的問題依然存在。如果我安裝了npm呢？ –

-1

一旦你import或require它將包括在webpack，除非你不設置它。例如：

注：進出口使用的WebPack 2

module: { 
    rules: [ // from 'loaders' to 'rules' 
     { 
      test: /\.js$/, 
      loader: 'babel-loader', 
      exclude: /node_modules/, 
     }, 
     { 
      test: /\.sass$/, 
      exclude: /node_modules/, 
      loader: ExtractTextPlugin.extract({ 
       fallbackLoader: 'style-loader', 
       loader: ['style-loader','sass-loader'] 
      }) 
     } 
    ] 
}

的exclude屬性將採取照顧。

例子：

// public/assets/style.scss 
@import 'substyle1'; 
@import 'substyle1'; 

body { 
    background-color: red; 
} 

// src/index.js -> entry file 
import '../public/assets/style.scss'; 
// Webpack will know that you are importing your SCSS/SASS file

希望這會有所幫助。

來源

2017-02-09 08:07:47 ickyrr

對不起，但你能澄清我會在哪裏做'進口'或'要求'？我將如何能夠編輯標準化表單？ –

正常情況下，我所做的就是在我的入口點通常是'index.js''輸入'或'require'。然後webpack將負責其餘的事情。如果你想編輯'normalize'表單，那麼你可以這樣做，就像你在一個非常簡單的項目中一樣（直接編輯文件本身） – ickyrr

或者在這種情況下，由於它是一個節點包，你可以創建一個新的'style.css '並將其導入到您的條目文件中，以使其可用於您的所有組件。 – ickyrr

可以使用NPM-安裝在以下方式normalize.css與陣營：

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import 'normalize.css'; // Note this 

const root = document.getElementById('root'); 

ReactDOM.render(<h1>Hello, World!</h1>, root);

結果將是：

注意，文本已被normalize.css風格。

得到它的工作，你需要類似下面的設置事情：

1）中的JavaScript添加從上面index.js

2）添加normalize.css（和朋友）package.json：

{ 
    "dependencies": { 
     "normalize.css": "^5.0.0", 
     "react": "^15.4.2", 
     "react-dom": "^15.4.2" 
    }, 
    "devDependencies": { 
     "babel-core": "^6.23.1", 
     "babel-loader": "^6.3.1", 
     "babel-preset-env": "^1.1.8", 
     "babel-preset-react": "^6.23.0", 
     "css-loader": "^0.26.1", 
     "style-loader": "^0.13.1", 
     "webpack": "^2.2.1", 
     "webpack-dev-server": "^2.3.0" 
    } 
}

3）使用正確的裝載機webpack.config.js：

const path = require('path'); 

module.exports = { 
    entry: path.resolve(__dirname, './index.js'), 
    output: { 
     path: path.resolve(__dirname, './dist'), 
     filename: 'bundle.js', 
    }, 

    module: { 
     rules: [ 
      { 
       test: /\.js$/, 
       exclude: path.resolve(__dirname, './node_modules'), 
       loader: 'babel-loader', 
       options: { presets: ['env', 'react'] }, 
      }, 
      { 
       test: /\.css$/, 
       use: [{ loader: 'style-loader' }, { loader: 'css-loader' }], 
      }, 
     ], 
    }, 
};

4）添加index.html文件中看到的結果：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
    <div id="root"></div> 
    <script src="bundle.js"></script> 
</body> 
</html>

4）安裝一切

npm install

5）啓動的WebPack devserver：

./node_modules/.bin/webpack-dev-server --open

注意：我使用normalize.css版本5.0.0。如果使用版本6.0.0或更高版本，字體將會不同。在該版本中，所有有見識的規則都從normalize.css中刪除。

來源

2017-02-15 09:50:20 jumoel

我是React n00b，通過Google找到它。截至今天，規範化文檔向您顯示'npm install'的命令行，但沒有明確提及可導入的軟件包名稱（它與安裝名稱不同），或者如何在...之後使用它...因此，我非常感謝這個答案。 =） –

我不得不使用'import'normalize-css/normalize.css'，只是導入'normalize.css會在當前目錄中查找 –

@GreyVugrin'normalize-css'與'normalize不一樣。 css'。 'normalize-css'自2014年以來沒有更新：https：//github.com/chrisdickinson/normalize-css – jumoel

如何使用npm install with webpack使用normalize.css？

回答

相關問題