1. 程式人生 > >Vue 融入flexible.js scss(sass)檔案 新增scss檔案 sass

Vue 融入flexible.js scss(sass)檔案 新增scss檔案 sass

Vue 融入flexible.js   scss

1.

安裝

npm install node-sass --save-dev

npm install sass-loader --save-dev

npm install style-loader --save-dev    

npm install sass-resources-loader --save-dev

不需要在index.js中進行引入任何一個檔案

 

2.Build/webpack.base.conf.js里加入

{

        test: /\.scss$/,

        loaders: ["style", "css", "sass"]

 },

這樣配置了scss檔案的識別

 

3.build/util.js

scss: generateLoaders('sass'),

換為
scss: generateLoaders('sass').concat(

      {

        loader: 'sass-resources-loader',

        options: {

          resources: path.resolve(__dirname, '../src/common/scss/reset.scss')  

        }

      }

    ),

這樣引入公共的scss檔案,現在測試的智慧引入一個

 

4.

index.html中引入flexible.js

 

5.使用的vue頁面

<style lang="scss" scoped="" type="text/css">

這裡寫scss樣式

</style>

 

6.本地的190102-app-flexible-scss專案是Vue 融入flexible.js   scss