create-react-app 中添加sass less以及配置全局變量

因爲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就成爲不須要引入就能夠使用的全局變量了.