react入门 之 命令行项目搭建 打包 scss、sass 引入

1. Win + R 打开 cmd 输入进行全局安装

    npm install -g create-react-app
   

2. 打开你要创建项目的目录 输入

    create-react-app hello-world
   

3.cd hello-world 打开文件夹 并输入 npm start 启动

4. 输入命令

   npm build
   

   文件引入路径 在 package.json 内 添加

    "homepage": ".",
   

5. 使用 scss

   npm install react --save
   

   引入 require('./index.scss');

   在 config 文件夹下的 webpack.config.prod.js 内配置输入

    {
      test: /\.scss$/,
      loaders: ['style-loader', 'css-loader', 'sass-loader'],
     },
   

   在 config 文件夹下的 webpack.config.dev.js 内添加

     {
       test: /\.scss/,
       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',
               }),
             ],
           },
         },
         {
           loader: 'sass-loader'
         }
       ],
     },