因为create-react-app中没有内置sass或许less这类预编译的东西, 这篇文章即为怎样增加sass或许less东西.

暴露webpack设置

起首全局下载create-react-app, 建立一个项目, 然后暴露出webpack的设置.

npm install -g create-react-app
create-react-app my-app
cd my-app
npm install
npm run eject

这里须要注重的是npm run eject这个敕令则是暴露出webpack设置的敕令.

增加sass

然后装置sass-loader.

npm i sass-loader node-sass --save-dev

找到config文件中的webpack.config.dev.js 中找到

rules: []

在它内里已设置了许多loader包含css的, 找到css的loader

{
            test: /\.css$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  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',
                    }),
                  ],
                },
              },
            ],
          },

就是这段代码 它已给做了postcss后处理设置好了, postcss这里就不说了,不相识的能够google一下.
在这段代码下面增加一段

{
            test: /\.scss$/,
            use: [
              {loader: require.resolve('style-loader')},
              {loader: require.resolve('css-loader')},
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  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',
                    }),
                  ],
                },
              },
              require.resolve('sass-loader')
            ],
          },

如许你dev跑起来的时刻scss文件就能够编译过去了 而且还做了后处理, 也不必本身去加一个前缀什么的.须要注重的是在build时不会去编译 假如想build时也编译的话. 在同级目次中找到webpack.config.prod.js, 在它内里找到css的loader, 把编译sass的loader放入雷同的位置即可.

增加sass全局变量

在我们运用sass时, 变量能够说是离不开的. 我们在运用时每一个须要用到的组件都须要去引入, 如许很贫苦.

这时候就用到了sass-resources-loader, 它能够增加全局变量等.

起首下载依靠包npm i sass-resources-loader --save-dev.
在上面增加scss划定规矩的loaders中到场sass-resources-loader:

...
{
    test: /\.scss$/,
    use: [
        {loader: require.resolve('style-loader')},
        {loader: require.resolve('css-loader')},
        {
        loader: require.resolve('postcss-loader'),
        options: {
            // Necessary for external CSS imports to work
            // https://github.com/facebookincubator/create-react-app/issues/2677
            ident: 'postcss',
            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',
            }),
            ],
        },
        },
        require.resolve('sass-loader'),
        {
            loader: require.resolve('sass-resources-loader'),
            options: {
                resources: './src/assets/css/theme.scss'
            }
        }
    ],
},
...

如许theme.scss就成为不须要引入就能够运用的全局变量了.