Resct配置less

菜花君°發表於2018-11-06

配置less

 

安裝less-loader

 

yarn add less-loader

 

開啟 webpack.config.dev.js 和 webpack.config.prod.js

 

找到  test: /.css$/,  修改為  test: /.(css|less)$/, 

 

找到 text 欄位下的 use ，給use陣列在新增一個物件 { loader: require.resolve(`less-loader`)}

 

重啟服務

 

啟用css作用域（css只對本頁面生效）

 

開啟 webpack.config.dev.js 和 webpack.config.prod.js

 

找到 loader: require.resolve(`css-loader`) 下的  options 欄位， 給這個物件新增一個欄位 modules: true

 

頁面呼叫

 

import style from `./style.less`

console.log(style) // class名均為style物件的key，所以呼叫必須使用style.App

  render() {return (
      <div className={style.App}>
      </div>
    )
  }

 

重啟服務 & 檢視效果

 

px轉換成rem

 

安裝 postcss-px2rem

 

yarn add postcss-px2rem

開啟 webpack.config.dev.js 和 webpack.config.prod.js

 

// 呼叫postcss-px2rem
const px2rem = require(`postcss-px2rem`)

 

在css-loader中找到  autoprefixer  這個屬性，在這個屬性之後新增  px2rem({ remUnit: 75 })

autoprefixer({
  browsers: [
    `>1%`,
    `last 4 versions`,
    `Firefox ESR`,
    `not ie < 9` // React doesn`t support IE8 anyway
  ],
  flexbox: `no-2009`
}),
px2rem({ remUnit: 75 })

 

重啟服務 & 檢視效果

 

附 : 完整程式碼

 

webpack.config.dev.js

 

// webpack.config.dev.js
{
  test: /.(css|less)$/,
  use: [
    require.resolve(`style-loader`),
    {
      loader: require.resolve(`css-loader`),
      options: {
        importLoaders: 1,
        modules: true // 是否啟動css區域性作用域
      }
    },
    {
      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`
          }),
          px2rem({ remUnit: 75 }) //設計稿根據750px(iphone6)
        ]
      }
    },
    {
      loader: require.resolve(`less-loader`)
    }
  ]
},

 

webpack.config.prod.js

 

// webpack.config.prod.js
{
  test: /.(css|less)$/,
  loader: ExtractTextPlugin.extract(
    Object.assign(
      {
        fallback: {
          loader: require.resolve(`style-loader`),
          options: {
            hmr: false
          }
        },
        use: [
          {
            loader: require.resolve(`css-loader`),
            options: {
              importLoaders: 1,
              modules: true, // 是否啟動css區域性作用域
              minimize: true,
              sourceMap: shouldUseSourceMap
            }
          },
          {
            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`
                }),
                px2rem({ remUnit: 75 }) //設計稿根據750px(iphone6)
              ]
            }
          },
          {
            loader: require.resolve(`less-loader`)
          }
        ]
      },
      extractTextPluginOptions
    )
  )
  // Note: this won`t work without `new ExtractTextPlugin()` in `plugins`.
},

 

style.less

 

.App {
  text-align: center;
  font-size: 16px;
  .goto {
    color: red;
  }
}

 

App.vue

 

// 頁面呼叫
import style from `./style.less`
// console.log(style)  輸出：{App:{...},goto:{...}}
<div className={style.App}>
  <Link to="/series" className={style.goto}>
    跳轉
  </Link>
</div>

 

相關文章