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